9

Ich möchte das Element, das von bootstrap-typeahead mit Lenker Vorlage gerendert wird, anpassen. Mit Blick auf den Code scheint es, dass das Standardelement <li><a href="#"></a></li> ist.wie man Lenker/Schnurrbart und Bootstrap typeahead für das Rendering Artikel

Nehmen wir an, ich möchte eine Lenkervorlage für die Wiedergabe meines Artikels verwenden.

Meiner Meinung nach sollte ich die Renderfunktion auf diese Weise neu definieren (1).

Meine Frage ist:
Wie sollte die (1) mit bootstrap-typeahead.js v2.1.0` verwendet werden?

Hier ist (2) der Code über die Optionen, die ich an $.fn.typeahead übergeben und (3) meine Lenker/Schnurrbart-Vorlage.


(1)

var renderItem = function (ul, user) { 
    // user is the Backbone.Model 
    return $('<li></li>') 
     .data('item.autocomplete', user) 
     .append(autocompleteItemTemplate(user.toJSON())) 
     .appendTo(ul); 
}; 

(2)

element.typeahead({ 
    minLength: 3, 
    source: function() { 
     var users = app.userCollection; 

     users = _.map(users, function (user) { 
      return user.get('first_name') + ' ' + user.get('last_name'); 
     }); 
     return users; 
    } 
}); 

(3)

<a>{{ first_name }} {{ last_name}}</a> 

Antwort

2

Sie können die Methode wie folgt machen überschreiben:

element.data("typeahead").render = function (items) { 
    var that = this; 

    that.$menu.empty(); 
    items = $(items).map(function (i, item) { 
     i = renderItem(that.$menu, item).attr("data-value", item); 
     i.find("a").html(that.highlighter(item)); 
     return i[0]; 
    }); 

    items.first().addClass("active"); 
    return this; 
}; 

Da jedoch typeahead der Quelleigenschaft muss immer ein Array von Strings sein oder eine Funktion, die ein Array von Strings zurück, in der renderItem den Benutzer Argument Funktion Sei Schnur, also denke ich, dass du Lenker nicht benutzen kannst.

Verwandte Themen