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

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

18 голосов
/ 21 марта 2011

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

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 вместо {{each}} шаблона jQuery из-за преимуществ, упомянутых в документах Knockout .

Ответы [ 4 ]

39 голосов
/ 04 ноября 2011

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

10 голосов
/ 21 марта 2011

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

<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, поэтому вам потребуется код current .Подробнее о templateOptions здесь .

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

4 голосов
/ 28 мая 2013 
<!-- ko if: $index() == 0 -->
your code
<!-- /ko -->
0 голосов
/ 09 мая 2014

Это: 

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

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

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

https://stackoverflow.com/a/16361750

...