knockout.js: использование foreach без контейнера в <select> не удается в Internet Explorer 8

Question

В статье RP Niemeyer Knockout.js Performance Gotcha #3 - All Bindings Fire Together предлагается подход к построению выпадающего списка:

<select data-bind="value: selectedOption">
    <!-- ko foreach: options -->
    <option data-bind="attr: { value: id }, text: name"></option>
    <!-- /ko -->
</select>

Этот код также находится в jsfiddle из статьи.

http://jsfiddle.net/rniemeyer/QjVNX/

Тем не менее, когда я использовал этот метод создания выбора в проекте, он работал просто отлично, пока я не протестировал в Internet Explorer 8. IE8 не удался и "не смог разобрать привязки".

Действительно, запуск скрипта из статьи в IE8 также приводит к ошибке. Есть ли способ построить выбор в IE8 (я полагаю, IE8 или меньше), используя foreach нокаута?

Answer 1

Да, это определенно проблема. Я должен буду обновить пост. IE удалит комментарии изнутри выбора.

Вот проблема, которую мы видели на github, которая похожа: https://github.com/SteveSanderson/knockout/issues/578

Одним из решений является использование Майкла Беста repeat привязка: https://github.com/mbest/knockout-repeat.

Одна из вещей, которую он позволяет вам делать, - это повторять один элемент несколько раз в другом контексте. Таким образом, в этом случае он будет действовать аналогично синтаксису без контейнеров, просто без комментариев.

Образец с повторением: http://jsfiddle.net/rniemeyer/QjVNX/

Вы также можете использовать другую технику из статьи (isolatedOptions), если вам не нужен больший контроль над элементами опций.

Answer 2

Хотя это проблема, в действительности здесь нет необходимости использовать foreach. Knockout включает в себя привязку 'options' для выбора, который довольно успешно работает в IE8.

Пожалуйста, смотрите документацию здесь: http://knockoutjs.com/documentation/options-binding.html

<select data-bind="value: selectedOption">
    <!-- ko foreach: options -->
    <option data-bind="attr: { value: id }, text: name"></option>
    <!-- /ko -->
</select>

Может быть изменено на:

<select data-bind="value: selectedOption, options: options, optionsText: function(item) {return item.name}, optionsValue: function(item) {return item.id}></select>

Надеюсь это поможет.