С knockout.js как обновить наблюдаемый массив в элементе Select

Question

Когда выпадающее меню загружено, элементы заполняются правильно. Но когда я нажимаю кнопку «Обновить», элементы раскрывающегося списка не обновляются. Связывание данных не работает при нажатии кнопки «Обновить». После нажатия кнопки «Обновить» я ожидаю увидеть «Мэри» и «Сандра».

Вот JavaScript:

 $(function() { 

     function viewModel() { 
      var self = this; 

      self.persons = ko.observableArray([]); 
      self.persons.push({ 
       id: 1, 
       name: 'John' 
      }); 
      self.persons.push({ 
       id: 2, 
       name: 'Paul' 
      }); 

      self.refreshPersonList = function() { 
       self.persons = ko.observableArray([]); 
       self.persons.push({ id: 3, name: 'Mary' }); 
       self.persons.push({ id: 4, name: 'Sandra' }); 
      }; 
     } 
     ko.applyBindings(new viewModel()); 
    }); 

И HTML:

<select data-bind="options: $root.persons(), optionsValue: 'id', optionsText: 'name'"></select> 
    <button value="Refresh" data-bind="event: {click : $root.refreshPersonList() }">Refresh Person List</button> 

Answer 1

Здесь вы создаете новый массив, нарушая существующие привязки:

self.persons = ko.observableArray([]); 

Попробуйте опорожнение массива вместо:

self.refreshPersonList = function() { 
    self.persons.removeAll(); //Empty array 
    self.persons.push({ id: 3, name: 'Mary' }); 
    self.persons.push({ id: 4, name: 'Sandra' }); 
};