Associazione personalizzata per selezione multipla in knockout js

Question

Sto cercando di creare un'associazione personalizzata in knockout per usarla come campo di selezione multipla. Ad esempio: Desidero progettare la schermata di selezione per il report delle fatture. In questa schermata di selezione vorrei utilizzare il campo "Tipo di fattura" per consentire agli utenti di fornire solo i tipi di fatture, a cui sono interessati. Se utilizzo una casella di testo standard per questo campo, gli utenti possono solo fornire un tipo di fattura . Voglio che siano in grado di fornire più di un tipo nella selezione. La mia idea era quella di preparare un legame come ad esempio:

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

dove ho potuto fornire campo 'optionsArray', tale da ostacolare la scelta multipla di utenti (nel mio caso che sarebbe più tipi di fattura). Se si tratta di interfaccia utente, ho pensato che potesse assomigliare a questo: c'è un pulsante accanto all'elemento con più rilegature. Dopo aver fatto clic su di esso, viene visualizzata la finestra di dialogo e tutti gli elementi 'optionsArray' sono visualizzati lì e possono essere modificati, nuovi possono essere aggiunti o cancellati.

Non so come ottenere ciò perché non sono riuscito a visualizzare tutti gli elementi OptionsArray nella finestra di dialogo in modo che possano essere modificati come osservabili e tutte le modifiche si riflettano in viewModel.optionsArray. È possibile?

Avete esperienza nella creazione di associazioni personalizzate e aiutatemi con questo?

Answer 1

Non è necessario creare custom binding per quello. È possibile utilizzare il collegamento selectedOptions qui è il collegamento alla documentazione: http://knockoutjs.com/documentation/selectedOptions-binding.html.

Aggiungere optionsArray e selectedTypes array osservabili al vostro modello di vista:

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

e legarsi a multiselect:

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

Qui è esempio di lavoro con il dialogo e l'aggiunta di nuove opzioni: 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(", ")) 
    } 
};