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 绑定元素之外的原因是它也是一个网格项，所以它必须是网格的直接子项。我想到通过 jquery 的 append 手动附加它，但是对于 MVVM，这是一个糟糕的想法（无论如何它都不起作用）。

有人知道用 knockout.js 做这个的方法吗？

Answer 1

如果我没有正确理解您的要求，看来您需要 containerless control flow. It has been talked about in the 2nd point of this 。

它允许你做这样的事情：

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

KnockoutJS foreach 循环中的非重复元素

Non-repeated element inside KnockoutJS foreach loop

javascript

jquery

knockout.js