Knockout.js模板化-“;跳过”;循环

Knockout.js templating - "skip" a loop?

本文关键字：跳过 循环 js Knockout      更新时间：2023-09-26

所以这是我的问题，我有一个页面设计要做，也就是说，理论上是这样的3 x 3网格。。。

X X X
X X X 
X X X

其中每个X都是缩略图。到目前为止，淘汰赛没有问题！除了网格看起来真的是这样。。。。

* X X
X * * 
X * X

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

Ken

因为设计永远不会改变，所以它应该是模板。不要把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>

如果你能管理数据库中的排列，只需在你想要空白的行集中吐出来。在模板中以不同方式处理具有true"isEmpty"列的行。

看看这把小提琴有没有一个真正下流的例子。你必须在造型上发挥你的想象力。http://jsfiddle.net/DSbtk/2/

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

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

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

Ken

相关文章：