KnockoutJS foreach 循环中的非重复元素

Question

我正在尝试创建一个显示一堆子组件的 knockout.js 组件（带有 CSS3 网格），我知道可以通过以下方式完成：

<div class="items grid" data-bind="foreach: { data: items, as: 'item' }">
    <item-component params="data: item" class="grid-item"></item-component>
</div>

问题是我无法弄清楚如何将非重复项放入此列表。最终，我想按照这些思路生成一些东西：

<div class="items grid">
    <div class="something-else grid-item"></div>
    <item-component class="grid-item"></item-component>
    <item-component class="grid-item"></item-component>
    <item-component class="grid-item"></item-component>
</div>

我不能把something-else 放在foreach-bound 元素之外的原因是它也是一个网格项，所以它必须是网格的直接子元素。我突然想到通过 jquery 的 append 手动附加它，但是对于 MVVM，这是一个糟糕的主意（无论如何它都不起作用）。

有没有人知道用 knockout.js 做到这一点的方法？

Answer 1

如果我正确理解了您的要求，看来您需要containerless control flow。这个answer的第二点已经讲过了。

它允许你做这样的事情：

<ul>
    <li class="header">Header item</li>
    <!-- ko foreach: myItems -->
        <li>Item <span data-bind="text: $data"></span></li>
    <!-- /ko -->
    <li class="tail">Tail item</li>
</ul>

输出：

<ul>
    <li class="header">Header item</li>
    <li>Item <span>Spoon</span></li>
    <li>Item <span>Fork</span></li>
    <li class="tail">Tail item</li>
</ul>