Knockout Multi select options not working

Question

Я пытаюсь переместить выбранные элементы в выпадающем списке с несколькими выборами в другой раскрывающийся список с несколькими выборами. В моем случае список выбора не освежает, даже если данные являются наблюдаемыми массивами.

Мой код находится в jsfiddle. Спасибо.

self.Move = function(){ 
    if (self.availableMAS.length > 0 && $('#selectedAttributes1 :selected').length > 0) 
    { 
     //self.selectedMAS = []; 
     $('#selectedAttributes1 :selected').each(function(i, selected){ 
      self.selectedMAS.push(new MAs($(selected).val(), $(selected).text())); 
      self.availableMAS.push(new MAs($(selected).val(), $(selected).text())); 
      //alert($(selected).text() + $(selected).val()); 
      alert(self.selectedMAS.length);     
     }); 
    } 

http://jsfiddle.net/balain/enjjx3q3/

Answer 1

Похоже, у вас было несколько вещей происходит. Вы создавали selectedMAS как наблюдаемый массив, но затем назначали его объекту. Кроме того, вы не использовали функциональные возможности привязки для кнопки и не выбирали элементы управления.

Смотреть это обновление: http://jsfiddle.net/enjjx3q3/9/

обновленный ход функции:

self.Move = function(){ 
    for(var i = 0, len = self.selectedItms().length; i < len; i++) { 
     self.selectedMAS.push(self.selectedItms()[i]); 
    } 
}; 

обновленный HTML:

<select id="selectedAttributes1" 
     data-bind="options: availableMAS, 
        selectedOptions: selectedItms,      
        optionsText: 'Name'" 
      multiple size="6"> 
</select> 
<input id="btnMove" type=button value="Move" data-bind="click: Move" ></input> 
<select id="selectedAttributes2" 
     data-bind="options: selectedMAS,       
        optionsText: 'Name', 
        selectedOptions: selectedMAS" 
     multiple size="6"> 
</select> 

Answer 2

Во-первых, в следующей строке:

vm.selectedMAS = [new MAs(1, 'Name1')]; 

Вы замены selectedMAS с голым (ненаблюдаемым) массивом вместо вызова его push метода:

vm.selectedMAS.push(new MAs(1, 'Name1')); 

И, главное, что вы должны использовать selectedOptions связывания обработчика для достижения нескольких вариантов проверка:

<select multiple size="6" data-bind="options: availableMAS, 
            selectedOptions: selectedMAS, 
            optionsText: 'Name'"> 
</select> 

И при чтении:

<select multiple size="6" data-bind="options: selectedMAS,       
            optionsText: 'Name'"> 
</select> 

См Fiddle