Knockout.js与多个Select2绑定

我的问题是什么时候我将我的Select2与具有Knockout View模型的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文件

   @* 1 2 3 4 5 *@ 

请注意，注释部分，即硬编码值有效，它允许我选择多个值，并使用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

祝好运！