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

【问题标题】：Knockout.js templating - "skip" a loop?Knockout.js 模板 - “跳过”一个循环？
【发布时间】：2012-03-20 08:19:39
【问题描述】：

所以这是我的问题，我有一个页面设计要处理，理论上是这样的 3 x 3 网格......

X X X
X X X 
X X X

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

* X X
X * * 
X * X

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

肯

【问题讨论】：

【解决方案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/

【讨论】：

【解决方案2】：

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

如果您显示更多代码，您可能会得到更好的答案:)

【讨论】：

【解决方案3】：

最后，我选择了完全不同的方式。我使用循环模板制作由 5 个元素组成的 UL，然后让 jquery“泥瓦匠”为我将它们堆叠在“网格”中。在模板中，我为每个项目添加了一个类及其循环索引，并使用 CSS 定义左右边距足以强制实现我想要的间距。

肯

【讨论】：