0

私はノックアウトでtag-itを使用しようとしています:

これは私のhtmlです：

<input placeholder="Tags" class="tagsInput" data-bind="tags:{}, tagitOptions: { initiateTags: myTags, tagSource: allMyTags, placeholder: 't-æ-g-g'}" />

どこ

myTags = ko.observableArray([]);
allMytags = ko.observableArray([]);

私のバインディングは次のようなものです：

ko.bindingHandlers.tags = {
    init: function (element, valueAccessor, allBindingsAccessor) {
        var options = allBindingsAccessor().tagitOptions || {};

        $(element).tagit(options);

    },
    update: function (element, valueAccessor) {
        //I´ll leave this til later...
    }

}

Firebug は options.initiateTags() = [ "myTag1", "myTag2" ] および options.placeholder = "t-æ-gg" と言っています。しかし、tagit は私の initializeTags を表示しません。なんで？

4

1 に答える 1

1

で観察可能なプロパティを使用している場合は、tagitOptionsそれらを に渡す前にアンラップする必要がありますtagit。

最も簡単なオプションは、ko.toJS観測可能なプロパティを通常のプロパティに再帰的に変換する関数を使用することです。

したがって、init関数を次のように変更します。

init: function (element, valueAccessor, allBindingsAccessor) {
    var options = allBindingsAccessor().tagitOptions || {};

    $(element).tagit(ko.toJS(options));
},

しかし、実際に機能させるには：

tagIt プラグインは Knockout とうまく連携しないため、機能させるには、入力の現在の値を指定できる場所のvalue前にバインディングを使用する必要があります。tag

<input placeholder="Tags" class="tagsInput" 
   data-bind="value: myTags, tags:{}, 
           tagitOptions: { availableTags: myTags, placeholderText: 't-æ-g-g'}" />

setTimeoutそして、バインディング ハンドラーでは、次のトリックを使用する必要があります。

init: function (element, valueAccessor, allBindingsAccessor) {
    var options = allBindingsAccessor().tagitOptions || {};

    setTimeout(function (){$(element).tagit(ko.toJS(options))},1);

},

JSFiddleのデモ。

于 2013-10-01T14:35:11.870 に答える