Question

我正在尝试在knockout中创建自定义绑定，以将其用作多个选择字段。例如：我想为发票报告设计选择屏幕。在此选择屏幕上，我想使用字段“发票类型”允许用户仅提供他们感兴趣的发票类型。如果我在此字段中使用标准文本框，则只允许用户提供一种发票类型。我希望他们能够在选择中提供多种类型。我的想法是准备一个绑定，如：

// html
<input data-bind="multiple: { data: optionsArray }" />
...
// view  model
optionsArray = ko.observableArray();

我可以提供字段'optionsArray'，这将保留用户的多重选择（在我的情况下，这将是多种发票类型）。如果涉及到UI，我认为它看起来像这样：元素旁边有一个带有多个绑定的按钮。单击它后，将出现对话框窗口，所有'optionsArray'元素都显示在那里，可以更改，可以添加或删除新元素。

我不知道如何实现这一点，因为我在对话框中显示所有optionsArray元素的方式失败了，因为它们可以被编辑为可观察对象，所有更改都反映在viewModel.optionsArray中。这甚至可能吗？

您是否有构建自定义绑定的经验并帮助我解决这个问题？

Answer 1

您无需为此创建custom binding。您可以在此处使用selectedOptions绑定链接到文档：http://knockoutjs.com/documentation/selectedOptions-binding.html。

将optionsArray和selectedTypes可观察数组添加到视图模型中：

self.optionsArray = ko.observableArray();
self.selectedTypes = ko.observableArray();

并绑定到multiselect：

<select data-bind="options: optionsArray, selectedOptions: selectedTypes" size="5" multiple="true"></select>

以下是带有对话框并添加新选项的工作示例：http://jsfiddle.net/vyshniakov/nZtZd/

Answer 2

ko.bindingHandlers.multiple = {
    init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
         $(element).change(function () {
             var actualValueArray = $(this).val().split(",");
             valueAccessor(actualValueArray);
         });
    },
    update: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var valueArray = valueAccessor();
        var valueArrayUnwrapped = ko.utils.unwrapObservable(value); 
        // Join all invoice numbers using comma
        $(element).val(valueArrayUnwrapped.join(", "))
    }
};

自定义绑定在knockout js中进行多项选择

2 个答案: