javascript - 选择的自定义绑定(bind)无法将对象作为值处理

Question

我有一个设置，其中我使用基于 observableArray 的选项填充一个选择。该数组包含具有更多属性的对象，而不仅仅是一个 id 和一个名称。我希望能够使用完整的 javascript 对象作为选定值。

数据是这样的:

this.optionData = ko.observableArray([
    {id: 1, name: "One", param: true},
    {id: 2, name: "Two", param: true},
    {id: 3, name: "Three", param: true},
]);

在 knockout 中使用标准绑定(bind)非常简单

<select data-bind="
   options: optionData,
   optionsText: 'name',
   optionsCaption: 'Please select',
   value: selectedOption">
</select>

但是，我想为我的选择设置样式，并为它们添加更多功能。我为此使用 select2。我提出了以下自定义绑定(bind)，这适用于同时使用 optionsText 和 optionsValue 的简单绑定(bind) - 但它不适用于没有 optionsValue 的选项绑定(bind)(即，当使用对象作为值时)。

ko.bindingHandlers.select2 = {
init: function (el, valueAccessor, allBindingsAccessor, viewModel) {

    ko.utils.domNodeDisposal.addDisposeCallback(el, function () {
        $(el).select2('destroy');
    });

    var allBindings = allBindingsAccessor(),
        select2 = ko.utils.unwrapObservable(valueAccessor());

    $(el).select2(select2);
},

update: function (element, valueAccessor, allBindingsAccessor, viewModel) {

    var selectedOptions = ko.unwrap(allBindingsAccessor.get("selectedOptions")),
        val = ko.unwrap(allBindingsAccessor.get("value")),
        options = ko.unwrap(allBindingsAccessor.get("options"));

    if ($(element).prop('multiple')) {
        $(element).select2('val', selectedOptions, true);
    }
    else {
        $(element).select2("val", val);
    }

    $(element).trigger('change');
}

};

我的问题是，我需要更新什么才能让我的自定义绑定(bind)作为默认的 knockout 选项绑定(bind)工作？

我制作了这个 fiddle 来演示这个问题:http://jsfiddle.net/SuneRadich/LdF45/1/

Answer 1

我的示例可能有助于使用 optionsAfterRender 获取对象。

<select id="selectArticles" multiple
 data-bind="options: availableArticles, selectedOptions: selectedArticles,
 optionsText: function(item){return item.title},
 optionsAfterRender: function(option, item){option.value = item}">
</select>

workding fiddle

如有必要，我可以将其更改为单选。