我的问题是什么时候我将我的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文件
<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所说,我编辑了代码,并引入了自定义绑定,但它仍然不起作用,我不认为自定义绑定的更新部分工作正常,因为下拉填充一次但无法绑定第二次.任何帮助都将很高兴.
解决方法
@rniemeyer不久前把它扔到了一个JSFiddle上,它可以帮助你：
http://jsfiddle.net/rniemeyer/R8UF5/
他的小提琴,更新
在更新值时,使用以下绑定与几个小提琴相结合：
ko.bindingHandlers.select2 = {
init: function(element,allBindingsAccessor) {
var obj = valueAccessor(),lookupKey = allBindings.lookupKey;
setTimeout(function() {
$(element).select2(obj);
},0);
if (lookupKey) {
var value = ko.utils.unwrapObservable(allBindings.value);
$(element).select2('data',function(item) {
return item[lookupKey] === value;
}));
}
ko.utils.domNodeDisposal.addDisposeCallback(element,function() {
$(element).select2('destroy');
});
},update: function(element) {
$(element).trigger('change');
}
};
