9

handlebars テンプレートを使用して、bootstrap-typeahead によってレンダリングされるアイテムをカスタマイズしたいと思います。コードを見ると、デフォルトの項目は のようです<li><a href="#"></a></li>。

アイテムをレンダリングするためにハンドルバー テンプレートを使用したいとします。

この方法でrender関数を再定義する必要があると私は考えています(1)。

私の質問は
、bootstrap-typeahead.js v2.1.0` で (1) をどのように使用すればよいですか?

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

1 に答える 1

2

次のようにrenderメソッドを上書きできます。

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

ただし、Typeaheadのソースプロパティは常に文字列の配列または文字列の配列を返す関数である必要があるため、renderItem関数ではユーザー引数が文字列になり、ハンドルバーを使用できないと思います。

于 2012-10-04T14:47:56.243 に答える