为什么这个自定义绑定不起作用？

Question

我正在尝试将 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-æ-g-g"。 但 tagit 不显示我的initialTags。为什么？

Answer 1

如果您在 tagitOptions 中使用 observable 属性，那么您需要在将它们传递给 tagit 之前解包它们。

最简单的选择是使用ko.toJS 函数，它将可观察属性递归地转换为常规属性。

所以修改你的init函数为：

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

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

但要让它真正起作用：

tagIt 插件不能很好地与 Knockout 配合使用，因此要使其正常工作，您需要在 tag 之前使用 value 绑定，您可以在其中指定输入的当前值：

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