Объединить значения в KnockoutJS

Question

У меня есть раскрывающийся список и текстовое поле. Когда я выберу значение в раскрывающемся списке, оно должно добавить это значение в текстовое поле. Если я выберу другой, то он должен соединить второе значение со значением в текстовом поле (разделяемое запятой).

Я пробовал:

   <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> 

Но это не работает. Пожалуйста, помогите ... Спасибо ...

Answer 1

Прежде всего, вы можете рассмотреть возможность выделения нескольких вариантов, если ваши пользователи могут сразу выбрать несколько элементов. KO связывается с массивом выбранных значений, и вы сможете делать свои вычисления, как хотите, просто контактируя с ними. См. here.

Это также будет лучше, потому что ваш список опций не будет отображаться в представлении.

Что-то вроде этого:

<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); 
}; 

Если вы не можете использовать мульти список выбора, вы можете вручную подписаться на currentSelection и сцепить в обработчике. (поиск «Явно подписывается на наблюдаемые»).

Однако, если вы постоянно добавляете выбранный вами вариант, вы можете получить одно и то же значение, добавленное несколько раз. Поэтому, если вы идете по этому маршруту, вы должны сохранить отдельный список уникальных значений (в словаре, таком как объект, например this) и вычислить его окончательное значение.