Knockout foreach binding - 2 on a row - css

Question

<div data-bind='foreach:images'>
<figure>
<img data-bind='attr:{src:src}' ></img>
<figcaption data-bind='text:name' contenteditable='true' ></figcaption>
</figure>
</div>
What this does is displays images vertically - since figure ( an fig caption are block elements).
What I am trying to achieve is this
1 2
3 4
5 6
..
..
i.e 2 images in each row.
I've tried a no. of things but could not some up with anything. Do I need to use knockout templates ?

Answer 1

Untested, but with the help of some CSS, you should be able to achieve it by using the index observable Knockout exposes within loops to get the current index:
CSS:
.container { overflow: hidden; }
.l { float: left; }
.clear { clear: left; }
Markup:
<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>
If your images are of a standard width then you could achieve the wrapping without the clear div by floating the figure tags as above, and setting the width of the container div to twice the image width.
I've created a JSFiddle showing the first method here.