Concaténer des valeurs dans KnockoutJS

Question

J'ai une liste déroulante et une zone de texte. Lorsque je choisis une valeur dans la liste déroulante, il convient d'ajouter cette valeur à la zone de texte. Si j'en choisis un autre, il devrait concaténer la deuxième valeur à la valeur de la zone de texte (à séparer par des virgules).

J'ai essayé:

   <table> 
        <tr> 
         <td>Options:</td> 
         <td> 
          <select data-bind="value:currentSelection"> 
           <option value=""></option> 
           <option value="Option 1">Option 1</option> 
           <option value="Option 2">Option 2</option> 
           <option value="Option 3">Option 3</option> 
           <option value="Option 4">Option 4</option> 
          </select> 
         </td> 
        </tr>       
        <tr><td>Selected options:</td><td><textarea data-bind='value: selectedOptions' ></textarea></td></tr> 

        <tr><td colspan="2">You have selected: <span data-bind='text: selectedOptions'> </span></td></tr> 
       </table> 


<script type="text/javascript"> 

var ViewModel = function() { 
    this.currentSelection = ko.observable("Option1"); 
    this.selectedOptions = ko.computed(function() { 
     return this.selectedOptions()+", "+this.currentSelection(); 
    },this); 
}; 

ko.applyBindings(new ViewModel()); 

</script> 

Mais, cela ne fonctionne pas. S'il vous plaît aider ... Merci ...

Answer 1

Tout d'abord, vous pouvez envisager une liste déroulante à sélection multiple si vos utilisateurs peuvent sélectionner plusieurs éléments à la fois. KO va lier avec un tableau de valeurs sélectionnées et vous serez en mesure de faire votre calculé comme vous le souhaitez simplement en les concaténant. Voir here.

Ce sera également mieux parce que votre liste d'options ne sera pas dans la vue.

Quelque chose comme ceci:

<select data-bind="options: availableOptions, selectedOptions: selectedOptions" size="4" multiple="true"></select> 

<textarea data-bind='value: selectionText' ></textarea> 


var ViewModel = function() { 
    var self = this; 
    self.availableOptions = ko.observableArray(["Option 1", "Option 2", "Option 3", "Option 4"]); 
    self.selectedOptions = ko.observableArray(["Option 1"]); 
    self.selectionText = ko.computed(function() { 
     return self.selectedOptions().join(','); 
    }, self); 
}; 

Si vous ne pouvez pas utiliser une liste de sélection multiple, vous pouvez vous abonner manuellement à la currentSelection et concaténer dans le gestionnaire. (cherchez "S'abonner explicitement aux observables"). Toutefois, si vous ajoutez continuellement l'option actuellement sélectionnée, vous pouvez obtenir la même valeur ajoutée plusieurs fois. Donc si vous allez cette route, vous devriez garder une liste séparée de valeurs uniques (dans un dictionnaire comme un objet, comme this) et calculer la valeur finale à partir de cela.