【发布时间】：2015-09-11 05:35:47
【问题描述】：
我正在评估与我们从 v3.5.x 升级相关的 select2 v4.0。我们将它与淘汰赛 v3.5.2 一起使用。我们的场景是我们希望允许用户根据来自 ajax 调用的 js 对象选择多个选项。 selectedoptions 绑定应该将整个 js 对象存储在其绑定的 observablearray 中，而不仅仅是 id 列表。
在我的测试中，这是我发现的
这是一个带有预定义选项列表的 select2。每个选项都有一个 id、text 和 displayText 属性。结果是 multipleSelectedObjects 可观察数组最终拥有一个包含整个 js 对象的数组，这是我所期望的，因为我没有设置 optionsValue 参数
<select class="multipleSelect" data-bind="options: multipleOptions, selectedOptions: multipleSelectedObjects, optionsText: 'displayText', select2v4: multipleOptionsSetup" style="width: 200px">
这是一个带有预定义选项列表的 select2。每个选项都有一个 id、text 和 displayText 属性。结果是 multipleSelectedValue 可观察数组最终有一个整数数组，表示所选 js 对象的 id，这是我所期望的，基于我设置 optionsValue 参数的事实
<select class="multipleSelect3" data-bind="options: multipleOptions, selectedOptions: multipleSelectedValue, optionsText: 'text', optionsValue: 'id', select2v4: multipleOptionsSetup" style="width: 200px">
这是一个 select2，它使用 ajax 选项进行服务调用以返回选项。返回的每个选项都有一个 id、text 和 displayText 属性。结果是 selectedItems 可观察数组最终具有一个整数数组，表示所选 js 对象的 id。这不是我所期望的。我尝试只设置 optionsText 属性，就像我对上面第一个 select2 所做的那样，但这并没有什么不同
<select id="select2Input" data-bind="selectedOptions: selectedItems, select2v4: selectSetup" style="width: 400px">
我认为这可能是一个 select2 问题，但我不确定。我们的 select2v4 绑定处理程序如下所示。在最后一个场景中，当淘汰赛命中 selectedOptions 部分时，该值是一个字符串，这让我认为 select2 没有设置为在使用 ajax 时传递整个对象。其他人经历过这个吗？这是一个错误还是设计使然？
// NOTE: this binding handler is made for select2 version 4.0
ko.bindingHandlers.select2v4 = {
init: function (element, valueAccessor, allBindingsAccessor) {
var bindingValue = ko.unwrap(valueAccessor());
var allBindings = allBindingsAccessor();
var valueDataChange;
// Observe external data changes; set data on change
if (ko.isObservable(allBindings.valueData)) { // special data binding
var onChange = false;
allBindings.valueData.subscribe(function (value) { // subscribe to external data changes
if (onChange) return; // ignore if on change to prevent recursion
$(element).select2("data", value, false); // set data explicitly; do not trigger change });
if (ko.isWritableObservable(allBindings.valueData)) {
valueDataChange = function () {
onChange = true; // suppress valueData subscription
allBindings.valueData($(element).select2("data"));
onChange = false;
};
$(element).on("change", valueDataChange); // update observable on data change
}
}
// Observe external value changes
else if (ko.isObservable(allBindings.value)) { // input or single select with observable value binding
allBindings.value.subscribe(function (value) { // subscribe to external value changes
if (typeof value === "string") { // optionsValue or tags specified
if (bindingValue.tags) { // tags specified
value = value.split(bindingValue.separator || ','); // split on value separator
}
$(element).val(value); // set val to allow select2 to resolve data from values; do not trigger change
}
else { // optionsValue not specified, value is complex data
$(element).select2("data", value, false); // set data explicitly; do not trigger change
}
});
}
// Observe external selection changes
else if (ko.isObservable(allBindings.selectedOptions)) { // multiselect with observable selection binding
allBindings.selectedOptions.subscribe(function (value) { // subscribe to external selection changes
if (value.length > 0 && typeof value[0] === "string") { // optionsValue specified
$(element).val(value); // set val to allow select2 to resolve data from values; do not trigger change
}
else { // optionsValue not specified, value is complex data
$(element).select2("data", value, false); // set data explicitly (only works if complex data object has 'id' property); do not trigger change
}
});
}
// Destroy select2 on element disposal
ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
$(element).select2('destroy');
if (valueDataChange != null) {
$(element).off("change", valueDataChange);
}
});
// Apply select2 and initialize data; delay to allow other binding handlers to run
setTimeout(function () {
// Apply select2
$(element).select2(bindingValue);
// Initialize data
if ("valueData" in allBindings) {
$(element).select2("data", ko.unwrap(allBindings.valueData), false);
}
}, 0);
}
};
【问题讨论】：
-
我遇到了同样的问题，select2 没有将对象返回到 selectedOptions 变量。如果我不应用 select2 而只使用敲除，它可以完美运行，但看起来不太好。
标签： knockout.js jquery-select2 jquery-select2-4