9

için nasıl kullanılır? Gidon şablonu kullanılarak bootstrap-typeahead tarafından oluşturulan öğeyi özelleştirmek istiyorum. Kod bakıldığında, varsayılan öğenin <li><a href="#"></a></li> olduğu anlaşılıyor.handlebars/bıyık ve bootstrap typeahead öğesinin render öğesi

Öğe oluşturmak için bir gidon şablonunu kullanmak istediğimi varsayalım.

Kanaatim bu şekilde render fonksiyonunu yeniden tanımlamalıyım (1).

Soruma soru:
(1) bootstrap-typeahead.js v2.1.0` ile nasıl kullanılmalıdır?

İşte (2) $.fn.typeahead'a aktardığım seçenekler ile ilgili kod (3) ve (3) gidon/bıyık şablonum.


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

cevap

2

Böyle hale yöntemi üzerine yazabilirsiniz:

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

Ancak typeahead kaynak özelliği her zaman renderItem kullanıcı argüman işlev içinde olacak, dizelerden oluşan bir dizi veya dize dizisi döndüren bir fonksiyon olması gerektiğinden string olmak, bu yüzden gidon kullanamayacağınızı düşünüyorum.

İlgili konular