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

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

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

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

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

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

来源

2012-10-25 Eori

您不需要为此创建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-25 13:00:37

这很好，但是selec t元素不是那么的风格化，而且我最想编辑每个项目。 – Eori

@Eori什么？ select元素是一个本地HTML元素：它可以通过CSS将样式设置为与每个其他HTML元素相同的级别。 – Tyrsius

本机多选是非常可怕的，但造型只能让你到目前为止。很多应用程序都有可以添加到文本区域的项目下拉菜单。有时候，这是通过隐藏的多重选择将选择传递给服务器完成的。这是淘汰赛应该擅长的事情。 –

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-25 13:20:02 STO

这只是采取所有的数组元素，并显示它们。我想在绑定每个数组元素到一个不同的输入元素，以便他们可以编辑。 – Eori

在这种情况下，只需创建模板而不是像可编辑网格示例http://knockoutjs.com/examples/gridEditor.html – STO

中所述的自定义绑定。但是，如果我在一个视图中有20个这样的字段，那就是很多代码。将它作为一个约束条件将会更加干净整洁。 – Eori

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

回答

相关问题