Knockout.js與多個Select2綁定

Question

我的問題是什么時候我將我的Select2與具有Knockout視圖模型的Multiple綁定。 選擇其中一個選項后，數據將第二次丟失

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它第一次工作，我得到一個填充列表，但在選擇一次后，第二次數據是丟失。

請幫忙，

謝謝，

編輯：正如Hanes所提到的，我已經編輯了代碼，並引入了自定義綁定，但它仍然不起作用，我不認為自定義綁定的更新部分工作正常，因為下拉填充一次但無法綁定第二次。 任何幫助都將很高興。

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調用中引入了錯誤：他返回了一個int數組，而不是具有正確屬性的對象。 僅在應用select2時才會出現此問題。

原因

你正在應用select2，但是select2與Knockout的搭配並不好。 為什么要這樣呢？ 它對Knockout和你的viewmodel一無所知，也不知道怎么玩得很好。

解

你需要一個針對select2控件的淘汰自定義綁定。 敲除自定義綁定是在 Knockout代碼和第三方插件之間創建集成的方法。 為你編寫和解釋這樣的自定義綁定對於這個答案來說有點太多了，所以我會給你以下鏈接： https ： //github.com/ivaynberg/select2/wiki/Knockout.js-Integration

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

對Knockout自定義綁定概念的引用： http ： //knockoutjs.com/documentation/custom-bindings.html

祝好運！