Как использовать foreach со специальным первым элементом?

Если у меня есть наблюдаемый массив

foos = [{ name: "a" }, { name: "b" }, { name: "c" }]

на моей viewmodel, я хотел бы сделать следующее:

<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 после а, б, в.

Есть идеи? В моем случае крайне важно использовать Knockout foreach вместо шаблона JQuery {{each}}из-за преимуществ, упомянутых в документах о нокауте.

Источник

4 ответа

Решение

Похоже, это станет возможным с новым безконтейнерным потоком управления и foreach переплет в КО 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/

Источник

Поскольку в настоящее время нет способа сообщить привязке шаблона, где визуализировать шаблон, я не вижу более чистого способа сделать это прямо сейчас, кроме как что-то вроде:

<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 здесь.

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

Источник 
<!-- ko if: $index() == 0 -->
your code
<!-- /ko -->
Источник

Это:

<ul>
    <li>Static item</li>
    <!-- ko foreach: products -->
        <li data-bind="text: name"></li>
    <!-- /ko -->
</ul>

не будет работать в IE8. Я склоняюсь к шаблону ответа для этой ситуации. Есть другие идеи?

РЕДАКТИРОВАТЬ: вот то, что работало в IE8 - нокаут 2.2.1: использование привязки опций в нижней части следующего комментария:

/questions/15842400/knockoutjs-ispolzovanie-foreach-bez-kontejnera-v-select-ne-udaetsya-v-internet-explorer-8/15842405#15842405

Источник
Другие вопросы по тегам