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

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/