knockout.js - Knockout.js：使用占位符循环遍历数组

Question

我遍历一组事件，为每个事件插入一个缩略图模板：

<ul data-bind="template: {name: 'eventThumb', foreach: events}"></ul>

现在，如果 3 行不完整，我想插入 1 或 2 个占位符：

<ul data-bind="template: {name: 'eventThumb', foreach: events}">
    <li data-bind="visible: events().length % 3 > 0">
       <div class="empty-block no-event"></div>
    </li>
    <li data-bind="visible: events().length % 3 > 1">
       <div class="empty-block no-event"></div>
    </li>
</ul>

但是我的占位符总是可见的。似乎任何数据绑定语句都不起作用。我正在检查这些元素的淘汰赛上下文，它似乎完好无损。我究竟做错了什么？

谢谢莱昂

Answer 1

我认为 ul 的主体没有被评估，因为它包含一个模板。也许将其更改为 div 是一种选择？

<div>
    <ul data-bind="template: {name: 'eventThumb', foreach: events}"></ul>
    <div data-bind="visible: events().length % 3 > 0">
       <div class="empty-block no-event"></div>
    </div>
    <div data-bind="visible: events().length % 3 > 1">
       <div class="empty-block no-event"></div>
    </div>
</div>

否则，您可能必须将占位符添加到 template eventThumb，并添加一个额外的条件，visible以便它只应用于最后一个循环（看看$index）。

此外，如果您在 foreach 中，则需要调用$root.events()or $parent.events()。