Liaison personnalisée pour la sélection multiple dans knockout js

Question

J'essaie de créer un custom binding dans knockout pour l'utiliser comme champ de sélection multiple. Par exemple : Je veux créer un écran de sélection pour un rapport sur les factures. Dans cet écran de sélection, j'aimerais utiliser le champ "Type de facture" pour permettre aux utilisateurs d'indiquer uniquement les types de factures qui les intéressent. Si j'utilise une zone de texte standard pour ce champ, les utilisateurs ne pourront indiquer qu'un seul type de facture. Je souhaite qu'ils puissent fournir plusieurs types dans la sélection. Mon idée était de préparer un binding tel que :

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

où je pourrais fournir le champ "optionsArray", qui contiendrait les choix multiples des utilisateurs (dans mon cas, il s'agirait de plusieurs types de factures). En ce qui concerne l'interface utilisateur, je pensais que cela pourrait ressembler à ceci : il y a un bouton à côté de l'élément avec des liens multiples. Après avoir cliqué sur ce bouton, une fenêtre de dialogue apparaît et tous les éléments "optionsArray" y sont affichés et peuvent être modifiés, de nouveaux éléments peuvent être ajoutés ou supprimés.

Je ne sais pas comment y parvenir car je n'ai pas réussi à afficher tous les éléments du tableau d'options dans la boîte de dialogue de manière à ce qu'ils puissent être modifiés en tant qu'observables et que toutes les modifications soient reflétées dans viewModel.optionsArray. Est-ce possible ?

Avez-vous de l'expérience dans la construction de fixations personnalisées et pouvez-vous m'aider ?

Answer 1

Vous n'avez pas besoin de créer custom binding pour cela. Vous pouvez utiliser selectedOptions La liaison est assurée par un lien vers la documentation : http://knockoutjs.com/documentation/selectedOptions-binding.html .

Ajouter optionsArray y selectedTypes à votre modèle de vue :

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

Et lier à multiselect :

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

Voici un exemple de travail avec un dialogue et l'ajout de nouvelles options : 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(", "))
    }
};