Niestandardowe powiązanie dla wielokrotnego wyboru w nokaucie js

Question

Próbuję utworzyć niestandardowe powiązanie w nokaucie, aby użyć go jako pola wielokrotnego wyboru. Na przykład: Chcę zaprojektować ekran wyboru dla raportu faktury. Na tym ekranie wyboru chciałbym użyć pola "Typ faktury", aby umożliwić użytkownikom podanie tylko tych faktur, którymi są zainteresowani. Jeśli użyję standardowego pola tekstowego dla tego pola, użytkownicy będą mogli podać tylko jeden typ faktury . Chcę, aby byli w stanie zapewnić więcej niż jeden typ w selekcji. Moim pomysłem było przygotowanie wiążących, takich jak:

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

gdzie mogę zapewnić pole „optionsArray”, które utrudniałyby wielokrotnego choise użytkowników (w moim przypadku, że byłoby wiele typów faktury). Jeśli chodzi o interfejs użytkownika, pomyślałem, że może wyglądać tak: istnieje przycisk obok elementu z wieloma powiązaniami. Po kliknięciu pojawia się okno dialogowe i wyświetlane są wszystkie elementy "optionsArray", które można zmienić, nowe można dodawać lub usuwać.

Nie wiem, jak to osiągnąć, ponieważ nie udało mi się wyświetlić wszystkich elementów optionsArray w oknie dialogowym w taki sposób, że można je edytować jako obserwowalne, a wszystkie zmiany są odzwierciedlane w viewModel.optionsArray. Czy to możliwe?

Czy masz doświadczenie w budowaniu niestandardowych wiązań i pomagasz mi w tym?

Answer 1

Nie musisz tworzyć dla tego custom binding. Możesz użyć wiązania selectedOptions tutaj jest link do dokumentacji: http://knockoutjs.com/documentation/selectedOptions-binding.html.

Dodaj optionsArray i selectedTypes obserwowalne tablice do widoku modelu

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

i wiążą się multiselect:

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

Tutaj jest przykład pracy z okna i dodając nowe opcje: 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(", ")) 
    } 
};