自定义绑定多个选择淘汰赛js

  • Z时代
  • 2024-01-10
  • 分类：问答

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

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

在那里我可以提供现场“optionsArray”，这将保存用户的多的choise（对我来说这将是多种发票类型）。 如果涉及到UI，我认为它可能看起来像这样：在具有多个绑定的元素旁边有一个按钮。点击它后，出现对话窗口，所有的'optionsArray'元素都显示在那里，可以更改，新的可以添加或删除。

我不知道如何实现这一目标，因为我无法在对话框中显示所有optionsArray元素，它们可以编辑为observables，所有更改都反映在viewModel.optionsArray中。这甚至有可能吗？

你有没有建立自定义绑定的经验，并帮助我呢？

回答：

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

回答：

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(", ")) 
    } 
};

以上是 自定义绑定多个选择淘汰赛js 的全部内容， 来源链接： utcz.com/qa/258333.html

回到顶部