Select2 与 Knockout.js 初始值

Question

我将 Select2 与 knockout.js 一起使用。

但是控件没有正确显示初始值。看来选择功能没有提出

我修改了一个现有的 jsbin 来演示我的问题。

http://jsbin.com/xufovura/6/edit

绑定：

<div data-bind="value: selectedState, select2: { data: states, placeholder: 'Select a State', formatResult: format ,initSelection: initSelect}" class="select2" style="width: 200px"></div>

自定义绑定的一部分（jsbin中的完整代码）：

ko.bindingHandlers.select2 = {
    init: function(el, valueAccessor, allBindingsAccessor, viewModel) {
      ko.utils.domNodeDisposal.addDisposeCallback(el, function() {
    $(el).select2('destroy');
});

            var allBindings = allBindingsAccessor(),
            select2 = ko.utils.unwrapObservable(allBindings.select2);

      $(el).select2(select2);

    }
};

 function initSelect(element, callback) {
   console.log("initSelect");
          var selectedItems = $.grep(this.states, function (e) { return e.id == element.id; });

           console.log(element);


            callback(selectedItems[0]);
        }

Answer 1

未调用您的 initSelect 函数的原因是 Select2 认为您的占位符已被选中。 Select2 读取$(element).val()，如果结果为假，则认为占位符被选中。

您的 div 元素将始终为 val() 结果返回 ""。

您应该将 div 元素切换为输入元素，但是当我在您的 jsBin 中执行此操作时，我发现输入的值没有被敲除初始化。这是值绑定的时间问题，因为在调用 select2 绑定的 init 函数时尚未调用值绑定的更新函数。

Knockout 首先调用所有的 init 函数，然后是 update 函数。

不使用选择元素时，Select2 不能很好地与 Knockout 配合使用！！

一个快速而肮脏的解决方案是确保在调用 select2 插件之前设置元素的值。

init: function(el, valueAccessor, allBindingsAccessor, viewModel) {
  ko.utils.domNodeDisposal.addDisposeCallback(el, function() {
    $(el).select2('destroy');
  });

  var allBindings = allBindingsAccessor(),
  select2 = ko.utils.unwrapObservable(allBindings.select2);

  // Ensure the input's value is set before calling select2
  $(el).val(allBindings.value());
  $(el).select2(select2);      
}

您也不再需要 initSelected 选项，事实上，由于$.grep(this.states, ...) "this" 导致您在 jsBin 中失败，此时并没有引用视图模型。

您还需要注意 allBindingsAccessor 在迁移到 Knockout 3.x 时会发生变化

---

更长更完整的答案涉及为各种 select2 事件设置处理程序，以及手动订阅支持值以在绑定的更新方法需要时协调对 $(el).select2('data', ...) 的手动调用。

如果您将后备存储更改为一个对象而不仅仅是一个字符串值（即存储实际的“状态”对象，而不仅仅是它的 id），那么这种方法也将是必需的