敲除每个绑定 - 连续 2 个

Question

<div data-bind='foreach:images'>            
<figure>
<img data-bind='attr:{src:src}' ></img>
<figcaption data-bind='text:name' contenteditable='true' ></figcaption>                
</figure>             
</div>

这样做是垂直显示图像 - 因为图（图标题是块元素）。

我想要实现的是这个

1 2<>3 45 6....

即每行2张图像。我试过没有。的事情，但什么都做不了。我需要使用挖空模板吗？

Answer 1

未经测试，但在一些 CSS 的帮助下，您应该能够通过使用循环中可观察的 Knockout 暴露index来获取当前索引：

.CSS：

.container { overflow: hidden; }
.l { float: left; }
.clear { clear: left; }

标记：

<div data-bind='foreach: images' class='container'>
  <figure class='l'>
    <img data-bind='attr: {src:src}'></img>
    <figcaption data-bind='text: name' contenteditable='true'></figcaption>
  </figure>
  <!-- ko if: ($index() + 1) % 2 === 0 -->
  <div class='clear'></div>
  <!-- /ko -->
</div>

如果您的图像是标准宽度，那么您可以通过如上所述浮动figure标签并将容器div的宽度设置为图像宽度的两倍来实现没有明确div的包装。

我创建了一个 JSFiddle，显示了这里的第一种方法。