选择的自定义绑定不能将对象作为值处理

Custom binding for a select can not handle objects as a value

本文关键字：处理 对象 自定义 绑定 不能 选择      更新时间：2023-09-26

我有一个设置，在这里我用基于observableArray的选项填充一个select。该数组包含的对象具有比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中使用标准绑定，这很好很容易

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

然而，我想样式我的选择，并添加更多的功能给他们。我用select2。我已经提出了以下自定义绑定，这适用于简单的绑定与optionsText和optionsValue -但它不工作的选项绑定没有optionsValue(即。(当使用对象作为值时)

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');
}

};

我的问题是，为了让我的自定义绑定作为默认的淘汰选项绑定工作，我需要更新什么?

我做了这个小提琴来演示这个问题:http://jsfiddle.net/SuneRadich/LdF45/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>

工作小提琴

如果需要的话，我可以把它改成single select

您可以使用optionAfterRender属性为您的select添加更多功能。

考虑这个例子

<select 
    data-bind="
        options: options,
        value : selectedOption,
        optionsText: 'Name',
        optionsAfterRender: $root.setTitle
    "
 ></select><br />
<button data-bind="click: showSelectedOptions">Show selection</button>
function Option(id, name){
    var self = this;
    self.Id = id;
    self.Name = name;
}
function ViewModel(){
    var self = this;
    self.options = ko.observableArray([
        new Option(0, "NormalText"),
        new Option(1, "AnotherText"),
        new Option(2, "WaaaaaaaaaaaaaaaayTooLongText")
    ]);
    self.selectedOption = ko.observable();
    self.showSelectedOptions = function(){
        console.log(self.selectedOption());
    }
    self.setTitle = function(option, item) {
        option.title = item.Name
        // other properties
    }     
}
ko.applyBindings(new ViewModel());

SQL Fiddle Demo

确保你的版本是3.1.0

相关文章：