Custom binding for multiple selection in js knockout

Question

I am trying to create a custom snap in a knockout to use it as multiple selection fields. For example: I want to create a selection screen for an account report. On this selection screen, I would like to use the "Account Type" field so that users can only provide the types of invoices that interest them. If I use a standard text field for this field, users will be allowed to provide only one type of account. I want them to be able to select more than one type. My idea was to prepare a binding, for example:

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

where I could provide a "optionsArray" field that will contain multiple user choices (in my case, it will be several types of invoices). If it comes to the user interface, I thought it might look like this: there are several buttons with several bindings next to the element. After clicking on it, a dialog box appears, and all the optionsArray elements are displayed there and can be changed, new ones can be added or deleted.

I do not know how to achieve this, because I could not display all the optionsArray elements in the dialog box as they can be edited as observables, and all changes are reflected in viewModel.optionsArray. Is it possible?

Do you have experience in creating custom bindings and help me with this?

Answer 1

You do not need to create custom binding for this. You can use the selectedOptions binding here, this is a link to the documentation: http://knockoutjs.com/documentation/selectedOptions-binding.html .

Add optionsArray and selectedTypes observed arrays to your view model:

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

And binding to multiselect :

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

Here is a working example with a dialog and adding new parameters: http://jsfiddle.net/vyshniakov/nZtZd/

Answer 2

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