Knockout.js模板 - “跳过”一个循环？

因此，这里是我的问题，我有一个页面设计上也就是工作，在理论上一个3×3格这样的...Knockout.js模板 - “跳过”一个循环？

X X X 
X X X 
X X X

其中各X是缩略图。到目前为止，Knockout没有问题！除了网格REALLY看起来像这样....

* X X 
X * * 
X * X

*其中*是一个空白的空白（一个空白的占位符图形）。该模式将永远不会改变。问题是，我怎样才能将一些智能注入Knockout模板（原生或与JQuery模板组合），它将“跳过”一个迭代，但不会吞噬预期用于该空间的数据？

肯

您的模型是否有每个缩略图src的属性？只需将路径添加到此属性的默认图形中，即占位符应该位于的那些空格。

如果你表现出一些更多的代码，你可能会得到一个更好的答案:)

2012-03-20 08:32:43 danwellman

由于设计永远不会改变，它应该是模板。不要浪费cpu周期做一个foreach，并且在你走的时候尽量找到漏洞。我会将9个占位符中的每一个都绑定到一个单独的viewmodel片段。然后，按照您想要显示的方式填充viewModel。

您有几种选择：

您的视图模型有9个属性各设置成你想要的地方显示1的实体 - 9。然后结合各一个。 <div id="thirdItem" data-bind="with:item3"></div>
在viewModel上创建一个总是有9个元素的数组。以少于9个项目的查询和拆分并弹出9元素数组来放置你的项目。 <div id="thirdItem" data-bind="with:items()[2]"></div>

如果您可以管理数据库中的安排，只需将它们放入需要空白的行集中即可。在模板中以不同的方式处理真正的“isEmpty”列。

检查这个小提琴是否真的是一个肮脏的例子。你必须在造型上运用你的想象力。 http://jsfiddle.net/DSbtk/2/

2012-03-20 12:45:20

我同意你布兰登;你总是应该设计你的视角模型，以防止视图中出现复杂的流动结构。 – Samuel 2012-03-20 12:52:01

我认为这是可以接受的，因为它提供了很多信息，并且让我走上了一条好东西。此外，它确实解决了所提出的问题。 – 2012-03-20 15:18:30

谢谢...还请注意，我更新了小提琴代表一个更强大的用例。仍然没有造型，但更好地显示了空白的概念。 http://jsfiddle.net/DSbtk/2/很高兴我能帮忙！ – 2012-03-20 17:10:29

最后，我采取了完全不同的方式。我使用了一个循环模板来使UL由5个元素组成，然后让jquerys“mason”将它们堆叠在一个“网格”中。在模板中，我用每个项目的循环索引添加了一个类，并使用CSS来定义左右边距足以强制我想要的间距。

肯

2012-03-20 15:20:41

回答