Knockout.js與多個Select2結合

Question

我的問題是，當我將我的Select2與Multiple與Knockout View Model綁定在一起時。選擇其中一個選項後，數據丟失第二次

KnockOutCode

$(window).load(function() { 

ko.bindingHandlers.select2 = { 
    init: function (element, valueAccessor, allBindingsAccessor) { 
     var obj = valueAccessor(), 
      allBindings = allBindingsAccessor(), 
      lookupKey = allBindings.lookupKey; 
     $(element).select2(obj); 
     if (lookupKey) { 
      var value = ko.utils.unwrapObservable(allBindings.value); 
      $(element).select2('data', ko.utils.arrayFirst(obj.data.results, function (item) { 
       return item[lookupKey] === value; 
      })); 
     } 

     ko.utils.domNodeDisposal.addDisposeCallback(element, function() { 
      $(element).select2('destroy'); 
     }); 
    }, 
    update: function (element) { 
     $(element).trigger('change'); 
    } 
}; 

ko.applyBindings(new ViewModel()); 
function ViewModel() { 
    var self = this; 

    self.MetricsModel = ko.observableArray([]); 

    GetMetrics(); 

    function GetMetrics() { 
     $.ajax({ 
      url: '/Admin/GetMetrics', 
      type: "POST", 
      dataType: "json", 
      success: function (returndata) { 
       self.MetricsModel(returndata); 
      }, 
      error: function() { 
       alert("eRROR GET Applications"); 
      } 
     }); 
    }; 

} 
$("#application-select-metrics").select2();  
}  

HTML文件

<select multiple="multiple" id="application-select-metrics" class="form-control" data-bind="options: MetricsModel, optionsText: 'Metrics_Name', OptionsValue:'Metrics_ID', optionsCaption: 'Choose...', select2: {}"></select> 
@*<select multiple="multiple" id="application-select-metrics" class="form-control"> 
    <option>1</option> 
    <option>2</option> 
    <option>3</option> 
    <option>4</option> 
    <option>5</option> 
</select>*@ 

請注意，註釋的部分，即硬編碼值的作品，和它允許我選擇多個值，並使用Knockout它第一次工作，我得到一個列表填充，但選擇一次後，第二次數據丟失。

請幫幫忙，

感謝，

編輯： 正如哈內斯提到的，我編輯的代碼，並推出自定義綁定，但它仍然無法正常工作，我不認爲更新部分的自定義綁定工作正常，因爲下拉列表只填充一次，但無法第二次綁定。任何幫助將很樂意欣賞。

Answer 1

@rniemeyer不是很久以前，扔這件事上的jsfiddle應該幫助你：

http://jsfiddle.net/rniemeyer/R8UF5/

他的小提琴，更新

使用以下綁定一對夫婦爲提琴組合時值已更新：

ko.bindingHandlers.select2 = { 
    init: function(element, valueAccessor, allBindingsAccessor) { 
    var obj = valueAccessor(), 
     allBindings = allBindingsAccessor(), 
     lookupKey = allBindings.lookupKey; 

    setTimeout(function() { 
     $(element).select2(obj); 
    }, 0); 

    if (lookupKey) { 
     var value = ko.utils.unwrapObservable(allBindings.value); 
     $(element).select2('data', ko.utils.arrayFirst(obj.data.results, function(item) { 
     return item[lookupKey] === value; 
     })); 
    } 

    ko.utils.domNodeDisposal.addDisposeCallback(element, function() { 
     $(element).select2('destroy'); 
    }); 
    }, 
    update: function(element) { 
    $(element).trigger('change'); 
    } 
}; 

Answer 2

首先，迴應評論：你的代碼是正確的。由Jeroen完成的JSFiddle在模擬的ajax調用中引入了錯誤：他返回了一個ints數組，而不是具有正確屬性的對象。只有在應用select2時纔會出現問題。

原因

你將選擇2，但選擇2不打尼斯淘汰賽。爲什麼呢？它對Knockout和你的視圖模型一無所知，它不知道如何與它打好關係。

解決方案

你需要一個淘汰賽定製的選擇2控制結合。敲除自定義綁定是方式來創建您的Knockout代碼和第三方插件之間的集成。要爲您編寫和解釋這樣的自定義綁定對於此答案會有點太多，所以我會給您以下鏈接： https://github.com/ivaynberg/select2/wiki/Knockout.js-Integration

有一個解決方案可以幫助您解決問題。他們還鏈接到JSFiddle，總而言之，您應該能夠在那裏找到所需的全部內容。如果這個對你來說太複雜了，你可以嘗試用google搜索'select2 knockout custom binding'，看看你能否找到一些不太複雜的東西。

一提到淘汰賽自定義綁定的概念：http://knockoutjs.com/documentation/custom-bindings.html

祝你好運！