带有引导选择器的 Knockout.JS

Question

我正在尝试将Bootstrap Selectpicker 与 knockout.js 一起使用。已经有一个自定义绑定适用于 selectpicker 的多选版本 (seen here)，但我需要它与单选版本一起使用。我认为这将像将ko.observableArray 更改为ko.observable 并删除multiple 属性一样简单——但情况似乎并非如此。关于如何让它发挥作用的任何想法？

Fiddle with the binding and my updated code

Answer 1

编辑替代解决方案见下文

问题在于您的 selectPicker.init 函数。

您需要调用选项绑定，而不是值绑定。 options.init 设置初始内部状态，当它绕过 options.update 函数时将重置该值。

// regular select and observable so call the default value binding
ko.bindingHandlers.value.init(element, valueAccessor, allBindingsAccessor);

改成

// regular select and observable so call the default value binding
ko.bindingHandlers.options.init(element, valueAccessor, allBindingsAccessor);

---

编辑

好的，我带你回到基础，使用标准选项绑定来获得正常的选择工作。

然后只使用 selectpicker 绑定来初始化和刷新。它将自行同步到选择。

在 Knockout 3 之前，如果元素上的任何绑定导致更新（例如更新选项、值或 selectedOptions），则将调用 selectPicker 更新函数。在 Knockout 3 中，绑定现在可以独立触发（好事），但您现在需要使用订阅来在选项或 value/selectedOptions 更改时获得通知。

我想您会发现这现在变得简单多了，并且在您的自定义绑定中单选和多选之间没有区别。如果 teamItems 或 itemID observable 被更新，这现在可以工作了。

HTML

<!-- Multiple Select -->
<select data-bind="selectedOptions: teamIDs, 
                   options: teamItems, 
                   optionsText: 'text', 
                   optionsValue : 'id', 
                   selectPicker: {}" multiple="true"></select>

JAVASCRIPT

ko.bindingHandlers.selectPicker = {
  after: ['options'],   /* KO 3.0 feature to ensure binding execution order */
  init: function (element, valueAccessor, allBindingsAccessor) {
     var $element = $(element);
     $element.addClass('selectpicker').selectpicker();

     var doRefresh = function() {
         $element.selectpicker('refresh');
     },  subscriptions = [];

     // KO 3 requires subscriptions instead of relying on this binding's update
     // function firing when any other binding on the element is updated.

     // Add them to a subscription array so we can remove them when KO
     // tears down the element.  Otherwise you will have a resource leak.
     var addSubscription = function(bindingKey) {
         var targetObs = allBindingsAccessor.get(bindingKey);

         if ( targetObs && ko.isObservable(targetObs )) {
            subscriptions.push( targetObs.subscribe(doRefresh) );
         }
     };

     addSubscription('options');
     addSubscription('value');           // Single
     addSubscription('selectedOptions'); // Multiple

     ko.utils.domNodeDisposal.addDisposeCallback(element, function() { 
         while( subscriptions.length ) {
             subscriptions.pop().dispose();
         }
     } );
   },
   update: function (element, valueAccessor, allBindingsAccessor) {
   }
 };

Answer 2

Knockout 对计算绑定（例如 item().children.length > foo().maxChildren）具有出色而强大的支持，而当前的答案不支持这些。

因此，作为对 RobertSlanley 答案的进一步改进，并基于 Knockout's documentation，我创建了以下绑定。

只要我们在更新方法中访问它们，Knockout 将自己处理可观察的订阅。 这意味着我们可以移除订阅垃圾，只专注于我们真正想做的事情：

ko.bindingHandlers.selectPicker = {
    after: ['options', 'value', 'selectedOptions'],
    init: function (element, valueAccessor, allBindingsAccessor) {
        $(element).addClass('selectpicker').selectpicker();
    },
    update: function (element, valueAccessor, allBindingsAccessor) {
        /* KO 3.3 will track any bindings we depend on
           and call us when any of them changes */
        allBindingsAccessor.get('options');
        allBindingsAccessor.get('value');
        allBindingsAccessor.get('selectedOptions');

        $(element).selectpicker('refresh');
    }
};

Here's a demo fiddle

Answer 3

很遗憾，我还不能对上面的答案发表评论，但是 HTML 部分有一个小错误：

选定的值绑定应该是selectedOptions 而不是selectOptions。

HTML

<!-- Multiple Select -->
<select data-bind="selectedOptions: teamIDs, 
               options: teamItems, 
               optionsText: 'text', 
               optionsValue : 'id', 
               selectPicker: {}" multiple="true"></select>