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 4
5 6
.. ..

即每行2张图片。我试过没有。事情，但不能有任何东西。我是否需要使用淘汰模板？

Answer 1

未经测试，但在某些CSS的帮助下，您应该能够通过在循环中使用index可观察的Knockout公开来获得当前索引来实现它：

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>

如果您的图片具有标准宽度，那么您可以通过如上所述浮动div标记并将容器figure的宽度设置为图像宽度的两倍。

我创建了一个显示第一个方法here的JSFiddle。

敲除foreach绑定 - 连续2

1 个答案: