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>

否则您可能需要将占位符添加到模板eventThumb，并为visible添加一个额外条件，因此它仅应用于最后一个循环（请查看$index ）。

此外，如果您是foreach，则需要致电$root.events()或$parent.events()。

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

1 个答案: