9
ハンドルバーテンプレートを使用してbootstrap-typeaheadによってレンダリングされるアイテムをカスタマイズしたいと思います。 コードを見ると、デフォルトアイテムは<li><a href="#"></a></li>
と思われます。アイテムをレンダリングするためのハンドルバーやひげを使用する方法
アイテムのレンダリングにハンドルバーテンプレートを使用したいとしましょう。
私はこの方法でレンダリング機能を再定義する必要があります(1)。
私の質問は
(1)with bootstrap-typeahead.js v2.1.0`をどのように使うべきですか?
ここには、(2)私が$.fn.typeahead
に渡しているオプションに関するコードと(3)私のハンドルバー/ひげそりテンプレートがあります。
(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>
先行入力のソースプロパティは常にのRenderItem機能では、文字列の配列や文字列の配列を返す関数でなければならないため、ユーザの引数は、しかし
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;
};
ます:あなたはこのようなレンダリングメソッドを上書きすることができます