Select2 with Knockout.js inital value

我使用Select2和knockout.js。Select2 with Knockout.js inital value

但該控件不顯示初始值正確。它看起來像選擇功能不提高

我修改了現有的jsbin來演示我的問題。

結合：自定義的

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

來源

2014-06-11 Boas Enkler

的原因，您的initSelect功能不被調用的是select2認爲你的佔位符被選中。您需要使用輸入元素，而不是div，因爲select2將嘗試通過調用jQuery的val函數來讀取元素的當前「值」。一個div元素總是會返回「」 –

您initSelect功能則不會調用的原因是選擇二認爲您的佔位符已被選中。選擇2讀取$(element).val()，如果結果是假的，則佔位符被認爲是被選中的。

您的div元素將始終爲val（）結果返回「」。

你應該把div元素切換到一個輸入元素，但是當我在你的jsBin中做了這個，然後我發現輸入值沒有被knockout初始化。這是值綁定的計時問題，因爲在調用select2綁定的init函數時，尚未調用值綁定的更新函數。

Knockout首先調用所有init函數，然後調用更新函數。

當不使用select元素時，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, ...)未能在jsBin「這」不是指該點的視圖模型。

您還需要注意到，allBindingsAccessor移動到淘汰賽3.X

的更長，更完整的答案涉及處理程序設置各種選擇2事件時變化，和手動訂閱後盾值根據綁定更新方法的需要，將手動調用協調爲$(el).select2('data', ...)。

這種方法還需要您應該備份存儲更改爲對象，而不是隻是一個字符串值（即存儲實際的「狀態」的對象，而不是它的id）

來源

2014-06-11 22:31:00

嗨！「移動到Knockout 3.x時allBindingsAccessor發生變化，喲意味着什麼」我需要更改什麼？ –

使用KO 3.x，元素上的單個綁定現在只在各自的依賴關係發生更改時纔會更新。在KO 2.x中，如果任何綁定依賴性更新，則元素上的所有綁定都會更新。這會導致allBindingAccessor參數發生較小的API更改。 'allBindingAccessor（）.value'現在是'allBindingsAccessor.get（'value'）'。 –

Select2 with Knockout.js inital value

回答

相關問題