jQuery Chosen 在使用 knockout js 时不会更新选择选项

Question

我正在尝试制作jQuery Chosen和 KnockoutJS同时工作。

问题是“jQuery Chosen”拒绝更新选项列表，即使我已经为其创建了自定义绑定(bind)。

这里是示例 - http://jsfiddle.net/5fGAf/

我有两个可更改的选择 - “国家/地区”和“方法”。 “方法”选项列表取决于所选国家/地区。当我第一次选择国家时 - 一切都很完美。但是，当我想更改国家/地区时，“方法”选项列表保持不变，即使相应的 knockout 计算值已更新。

如果我在浏览器控制台中手动运行 $(".chosen-select").trigger('chosen:updated') - 选项列表更新。

自定义绑定(bind)代码:

ko.bindingHandlers.chosen = {
  init: function(element) {             
    $(element).chosen({disable_search_threshold: 10});
  },
  update: function(element) {
    $(".chosen-select").trigger('chosen:updated');
  }
};

Answer 1

您有两个问题:

• 在你的 fiddle 中没有 .chosen-select 所以你的 update 函数找不到 select 但无论如何你应该使用 $(element) 访问当前绑定(bind)的元素
• 在 KO 3.0 bindings are fired independently 。由于您的选择的绑定(bind)未连接到您的可观察数组，因此当您更改该数组时，您的update不会触发。

您可以通过在自定义绑定(bind)中显式声明对 options 绑定(bind)的依赖关系来解决此“更新”问题，但更好的解决方案是委托(delegate)给它:

ko.bindingHandlers.chosen = {
    init: function(element)  {
        ko.bindingHandlers.options.init(element);
        $(element).chosen({disable_search_threshold: 10});
    },
    update: function(element, valueAccessor, allBindings) {
        ko.bindingHandlers.options.update(element, valueAccessor, allBindings);
        $(element).trigger('chosen:updated');
    }
};

并在通常使用 options 绑定(bind)的地方使用它:

<select id="option1" class="form-control" 
    data-bind="chosen: payoutOptions, 
               optionsText: 'optionText', 
               optionsValue: 'optionValue', 
               value: activePayoutOption"></select>

演示 JSFiddle .