如何将 foreach 与特殊的第一个元素一起使用？答案

【问题标题】：How to use foreach with a special first element?如何将 foreach 与特殊的第一个元素一起使用？
【发布时间】：2011-07-19 07:27:25
【问题描述】：

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

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}} 至关重要，因为 the benefits mentioned in the Knockout docs。

【问题讨论】：

标签： jquery-templates knockout.js

【解决方案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/

【讨论】：

【解决方案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。

希望这会有所帮助。

【讨论】：

看起来，嗯，不可怕。特别是如果我使用模板组合将“真实模板”与代理模板隔离开来。
理论上，我想说最好的解决方案是添加一个<ko:bind-location /> 标签（或类似标签），这样该标签就会被替换结果数据绑定而不是填充。然后<ul /> 可以同时包含<li class="add-new-foo" /> 和<ko:bind-location />，其中data-bind 属性值当前存在于<ul /> 上。也许我会尝试分叉 KO 并添加一些时间......
一种方法是使用数组的排序功能。您可以定义自己的排序功能，您可以始终将特殊的东西放在最上面。
我正在考虑建议将第一项添加到数组中，但似乎他的第一项是另一种动物，并不是他想要与他的 observableArray 混合的东西（任何对数组中的项目进行操作必须知道这个是不同的，并且在返回服务器时必须将其过滤掉）。不过可能对他有用。
是的，第一个确实不是视图模型的一部分，而是视图的一部分。

【解决方案3】：

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

【讨论】：

这是答案，因为问题是“如何使用没有元素的 foreach”

【解决方案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

【讨论】：