Knockoutjs не обновляет свой пользовательский интерфейс, когда я изменяю observableArray

Question

Это мой шаблон:

<tr> 
    <td> 
     <table> 
      <thead> 
       <th> 
        <span>Option name:</span> 
       </th> 
      </thead> 
      <tbody data-bind="template: {name: 'optionChoiceTemplate', foreach: choices, templateOptions:{choiceArray: choices} }"></tbody> 
     </table> 
     <button data-bind="click: function(){choices.push('');}">Add new</button> 
    </td> 
</tr> 

Но когда я нажимаю «Добавить новый» кнопку, на мой взгляд не обновляется, чтобы включить новый вариант с пустую строку. Я проверил в отладчике, что пустая строка добавлена ​​в выбор, и я убедился, что выбор является наблюдаемым массивом, что еще может произойти неправильно?

Answer 1

Проблема в том, что при использовании плагин JQuery Шаблоны с template связывания с опцией foreach, пустые строки, рассматриваются как нулевые значения и не отображаются.

Вы можете обойти это с помощью объекта {text: ''} и привязки к text или нажатием чего-то другого, кроме пустой строки (например, одного пробела).

В качестве альтернативы, если вы можете перейти в Knockout 2.0 и использовать собственные шаблоны, ваши пустые строковые элементы будут отображены правильно.

Answer 2

Я создал скрипку, которая использует ваш HTML, чтобы отобразить список элементов и позволяет пользователю добавлять новый элемент двумя способами. Первый способ - использовать вашу функцию щелчка, которую вы создали. Второй способ - использовать привязку кликов.

Это должно ответить на ваш вопрос.

http://jsfiddle.net/johnpapa/4PfUr/