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 不显示我的initialTags。为什么？

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 回答