Select2具有Knockout.js初始值

Question

我將Select2與kickout.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() ，如果結果為false，則認為該占位符已被選中。

您的div元素將始終為val（）結果返回“”。

您應該將div元素切換為輸入元素，但是當我在jsBin中執行此操作時，我發現輸入的值尚未通過敲除進行初始化。 這是值綁定的時間問題，因為調用select2綁定的init函數時尚未調用值綁定的更新函數。

淘汰賽首先調用所有初始化函數，然后調用更新函數。

不使用select元素時，Select2在淘汰賽中表現不佳！

一種快速而骯臟的解決方案是在調用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, ...)而導致的jsBin失敗，此時“ this”未引用視圖模型。

您還需要注意，移至Knockout 3.x時allBindingsAccessor會更改

---

更長，更完整的答案包括設置處理程序以處理各種select2事件，以及手動訂閱支持值，以在更新方法需要時將手動調用與$(el).select2('data', ...)進行協調$(el).select2('data', ...)您的綁定。

如果將后備存儲更改為對象而不是僅更改為字符串值（例如，存儲實際的“狀態”對象，而不僅僅是其id），則也需要這種方法