Question

如果我有一个可观察的数组

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 放在之后的a，b，c。

有什么想法吗？在我的情况下，由于the benefits mentioned in the Knockout docs，使用Knockout foreach而不是jQuery模板的{{each}}至关重要。

Answer 1

在KO ~~1.3~~ 2.0中，新的无容器控制流和foreach绑定看起来是可能的：

<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/

Answer 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/

在1.12 KO之后还添加了templateOptions，因此您需要current代码。有关templateOptions here的更多信息。

希望这有帮助。

Answer 3

<!-- ko if: $index() == 0 -->
your code
<!-- /ko -->

Answer 4

此：

<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

如何使用具有特殊第一元素的foreach？

4 个答案: