Как использовать 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/...