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>

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

Answer 1

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

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

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

Answer 2

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

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

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