Knockout.js：通过使用占位符的阵列

我遍历事件插入缩略图模板它们中的每一个阵列循环：Knockout.js：通过使用占位符的阵列

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

现在我要插入1名或2的占位符，如果一排3不完整：

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

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

感谢莱昂

来源

2013-07-16 Leon

你能解释一下你的目的吗，你的html在2里相同 –

这不是真的一样。我有几行缩略图，每行3个。现在，我想要最后一行有3个元素。如果我的事件数组未填写，我想放置一个占位符来完成该行。这就是为什么我使用模数：长度％3> 0和长度％3> 1 – Leon

所以要清楚，你有事件列表，并且你想为每个项目插入缩略图模板，但是在最后一行少于3个事件，那么你会填写一些空块？准确地说是 –

我认为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()。

来源

2013-07-16 15:16:39 sroes

谢谢你的回答。你是对的：ul-body根本没有被评估。没有数据绑定语句的工作。 div解决方案可以工作，但将ul和div排成一行很难。 UL和带有LI的模板是项目中的可重用模块，所以我不愿意在那里更改HTML和CSS。我也在尝试使用knockout的评论风格：<！ - ko：template .....但是它似乎也不起作用。 – Leon

Knockout.js：通过使用占位符的阵列

回答

相关问题