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

Question

所以这是我的问题，我有一个页面设计可供使用，理论上是一个像这样的3 x 3网格......

X X X
X X X 
X X X

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

* X X
X * * 
X * X

*是空格（空白占位符图形）。模式永远不会改变。问题是如何将一些智能注入Knockout模板（本机或与JQuery模板结合），这将“跳过”迭代但不会吞噬用于该空间的数据？

肯

Answer 1

由于设计永远不会改变，它应该是模板。不要浪费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/

Answer 2

你的模型是否有每个缩略图src的属性？只需将该属性的默认图形路径添加到占位符所在的空间即可。

如果您展示了更多代码，您可能会得到更好的答案：）

Answer 3

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

肯