нокаут.js: использование бесконтейнерного foreach при сбое в Internet Explorer 8

на РП НимейерС нокаут.JS Performance Gotcha #3 - Все привязки срабатывают вместе, предусмотрен подход к построению выпадающего списка:

<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/

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

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

8
internet-explorer-8 knockout.js

2 ответов

Да, это определенно проблема. Мне придется обновить сообщение. IE будет удалять комментарии изнутри select.

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

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

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

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

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

8

хотя это проблема, на самом деле нет необходимости использовать "foreach" здесь. Нокаут включает в себя привязку "параметры" для выбора, который вполне счастливо работает в 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>

надеюсь, что это помогает.

3