Question

我正在使用knockout.js。我陷入了一个有点奇怪的情况（很难解释，但我正在努力，对不起，如果我不清楚）。我在一个选择列表上使用自定义绑定和选项绑定：

  <select data-bind="options : arrayOfOptions, optionsText: 'Name', 
           optionsValue: 'Name', chosen: { }">
  </select>

ko.bindingHandlers.chosen = {
    init: function (element, valueAccessor, allBindingAccessor, 
                    viewModel, bindigContext) {
        var options = ko.utils.unwrapObservable(valueAccessor() || {});
        $(element).chosen(options);
    }
};

此时在运行时selectlist将填充arrayOfOptions数组中的所有可用选项，chosen是一个自定义绑定，我在选择列表中应用CHOSEN PLUGIN。

现在我面临的问题是，当我在选择列表中选择插件时，在自定义绑定中，选择列表没有填充arrayOfOptions数组中的选项。简单地表示custom binding在options binding之前执行。有人可以给我一个解决方案，以便在选项绑定后应用自定义绑定吗？

Answer 1

使用此绑定所依赖的bindingHandler名称数组创建一个after属性。

ko.bindingHandlers.chosen = { init: function (element, valueAccessor, allBindingAccessor, viewModel, bindigContext) { var options = ko.utils.unwrapObservable(valueAccessor() || {}); $(element).chosen(options); }, after:['options'] };

Answer 2

将您的通话移至chosen进入更新。

http://jsfiddle.net/jearles/avSfa/28/

-

ko.bindingHandlers.chosen = {
    init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
        var allBindings = allBindingsAccessor();

        var options = {default: 'Select one...'};
        $.extend(options, allBindings.chosen)

        $(element).attr('data-placeholder', options.default);                
    },
    update: function(element, valueAccessor, allBindingsAccessor, viewModel) {
        $(element).chosen();
    }
};

-

或者，您可以使用setTimeout将调用移至chosen到执行队列的底部。这将为Knockout选项提供绑定时间，以便在chosen尝试转换它之前完成其工作。

ko.bindingHandlers.chosen = {
    init: function (element, valueAccessor, allBindingAccessor, 
                    viewModel, bindingContext) {
        var options = ko.utils.unwrapObservable(valueAccessor() || {});
        setTimeout(function() { $(element).chosen(options); }, 0);
    }
};

Answer 3

ko.bindingHandlers.chosen = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
    var options = allBindingsAccessor().options;

    options.subscribe(function (newValue) {
        $(element).chosen();
        $(element).trigger("chosen:updated");
    });

    var value = allBindingsAccessor().value;
    value.subscribe(function (newValue) {
        $(element).trigger("chosen:updated");
    });
},
update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
    if (element.options.length > 0) {
        $(element).chosen();
        $(element).trigger("chosen:updated");
    }
}

};

这适用于KO JS 3.0

Answer 4

虽然上面的答案可以解决所提出的问题，但他们似乎无法自定义您选择的下拉菜单，例如通过传递{＆＃39; disable_search＆＃39;：true}来禁用搜索。

我建议进行以下修改，以允许在绑定中传递选定的自定义。

<select data-bind="options : arrayOfOptions, optionsText: 'Name', 
    optionsValue: 'Name', chosen: { 'disable_search': true }">
</select>

ko.bindingHandlers.chosen = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        var options = allBindingsAccessor().options;
        var chosenOptions = allBindingsAccessor().chosen;

        options.subscribe(function (newValue) {
            $(element).chosen(chosenOptions);
            $(element).trigger("chosen:updated");
        });

        var value = allBindingsAccessor().value;
        value.subscribe(function (newValue) {
            $(element).trigger("chosen:updated");
        });
    },
    update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        if (element.options.length > 0) {
            var chosenOptions = allBindingsAccessor().chosen;
            $(element).chosen(chosenOptions);
            $(element).trigger("chosen:updated");
        }
    }
};

如何订购淘汰赛绑定？

4 个答案: