如何订购淘汰赛绑定？

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

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

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

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

Answer 1

将您的呼叫转移到更新中。

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 2

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

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

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

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

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

   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"); } } };