javascript - Knockout JS 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 绑定(bind)元素之外的原因是它也是一个网格项，因此它必须是一个网格的直接子代。我曾想过通过 jquery 的 append 手动附加它，但是对于 MVVM，这是一个糟糕的主意(无论如何它都不起作用)。

有人知道如何使用 knockout.js 做到这一点吗？

Answer 1

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

它允许你做这样的事情:

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