Question

我正在尝试使用tag-it with knockout：

这是我的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没有显示我的initiateTags。为什么呢？

Answer 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。

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

1 个答案: