9

Chciałbym dostosować element, który jest renderowany przez bootstrap-typeahead przy użyciu szablonu kierownicy. Patrząc na kod wydaje się, że domyślny element to <li><a href="#"></a></li>.jak używać kierownic/wąsów i bootstrapów do renderowania elementu pozycji

Załóżmy, że chciałbym użyć szablonu kierownicy do renderowania mojego przedmiotu.

Moim zdaniem powinienem przedefiniować funkcję renderowania w ten sposób (1).

Moje pytanie brzmi:
w jaki sposób należy użyć (1) z plikiem bootstrap-typeahead.js v2.1.0`?

Oto (2) kod o opcjach, które przekazuję do $.fn.typeahead i (3) szablon mojego kierownicy/wąsów.


(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> 

Odpowiedz

2

Można nadpisać metodę renderowania tak:

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; 
}; 

Jednakże, ponieważ właściwość source wpisywanie znaków z wyprzedzeniem musi zawsze być tablicą stringów lub funkcja, która zwraca tablicę ciągów, w renderItem funkcjonować argumentu użytkownik będzie być struną, więc myślę, że nie będziesz w stanie użyć Kierownicy.

Powiązane problemy