6

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

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

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

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

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

4

2 回答 2

5

你不需要为此创建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/

于 2012-10-25T13:00:37.267 回答
0 
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(", "))
    }
};
于 2012-10-25T13:20:02.290 回答