Как использовать foreach со специальным первым элементом?
Если у меня есть наблюдаемый массив
foos = [{ name: "a" }, { name: "b" }, { name: "c" }]
в моей модели просмотра, я хотел бы сделать следующее:
<ul>
<li class="add-new-foo">Special stuff here</li>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
Я довольно близко с
<ul data-bind="template: { name: 'foo-template', foreach: foos }">
<li class="add-new-foo">Special stuff here</li>
</ul>
<script id="foo-template" type="text/html">
<li data-bind="text: name"></li>
</script>
Но это закончилось тем, что положил .add-new-foo
после a, b, c.
Любые идеи? В моем случае очень важно использовать Knockout foreach
вместо шаблона jQuery {{each}}
, из-за преимуществ, упомянутых в документах Knockout.
Ответы
Ответ 1
Похоже, что это будет возможно с новым потоком управления без контейнера и привязкой foreach
в KO 1.3 2.0:
<ul>
<li>Static item</li>
<!-- ko foreach: products -->
<li data-bind="text: name"></li>
<!-- /ko -->
</ul>
Подробнее см. в этом сообщении: http://blog.stevensanderson.com/2011/08/31/knockout-1-3-0-beta-available/
Ответ 2
Так как в настоящее время нет способа сообщить привязку шаблона, где будет отображаться шаблон, я не вижу более чистого способа сделать это прямо сейчас, кроме как-то вроде:
<ul data-bind="template: { name: 'foo-template', foreach: foos, templateOptions: { first: foos()[0]} }">
</ul>
<script id="foo-template" type="text/html">
{{if $item.first === $data}}
<li class="add-new-foo">Special stuff here</li>
{{/if}}
<li data-bind="text: name"></li>
</script>
Итак, мы передаем первый элемент в вашем массиве как templateOptions и проверяем, действительно ли элемент, с которым мы имеем дело в шаблоне, первый.
Пример здесь: http://jsfiddle.net/rniemeyer/XuXcr/
Также добавлено templateOptions после 1.12 KO, поэтому вам понадобится текущий код. Подробнее о templateOptions здесь.
Надеюсь, что это поможет.
Ответ 3
<!-- ko if: $index() == 0 -->
your code
<!-- /ko -->
Ответ 4
Это:
<ul>
<li>Static item</li>
<!-- ko foreach: products -->
<li data-bind="text: name"></li>
<!-- /ko -->
</ul>
не будет работать в IE8. Я склоняюсь к шаблону ответа на эту ситуацию. Любые другие идеи?
EDIT: вот что работало в IE8 - нокаут 2.2.1: использование привязок опций в нижней части следующего комментария:
fooobar.com/info/284758/...