нокаут.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 красавчика?
2 ответов
Да, это определенно проблема. Мне придется обновить сообщение. IE будет удалять комментарии изнутри select.
вот проблема, которую мы видели на github, которая похожа:https://github.com/SteveSanderson/knockout/issues/578
одним из решений является использование Майкла Беста repeat
привязка:https://github.com/mbest/knockout-repeat.
одна из вещей, которые он позволяет сделать, это повторить один элемент несколько времена с другим контекстом. Таким образом, в этом случае он будет действовать аналогично синтаксису без контейнеров, только без комментариев.
образец с повторением:http://jsfiddle.net/rniemeyer/QjVNX/
вы также можете использовать другую технику из статьи (isolatedOptions
), Если вам нужно больше контроля над элементами вариант.
хотя это проблема, на самом деле нет необходимости использовать "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>
надеюсь, что это помогает.