knockout.js - knockout js中多选的自定义绑定(bind)

Question

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

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

我可以在其中提供字段“optionsArray”，该字段将保存用户的多项选择(在我的情况下，这将是多种发票类型)。
如果涉及到 UI，我认为它可能看起来像这样:元素旁边有一个按钮，具有多个绑定(bind)。单击它后，会出现对话框窗口，所有的“optionsArray”元素都显示在那里并且可以更改，可以添加或删除新元素。

我不知道如何实现这一点，因为我未能以一种可以将它们编辑为可观察对象的方式在对话框中显示所有 optionsArray 元素，并且所有更改都反射(reflect)在 viewModel.optionsArray 中。这甚至可能吗？

您在构建自定义绑定(bind)方面有任何经验并帮助我吗？

Answer 1

您无需创建 custom binding为了那个原因。您可以使用 selectedOptions这里的绑定(bind)是文档的链接:http://knockoutjs.com/documentation/selectedOptions-binding.html .

添加 optionsArray和 selectedTypes View 模型的可观察数组:

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

并绑定(bind)到 multiselect :

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

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