how to bind multiple images to figure element with knockout.js

Question

i want generate below output with knockoutjs.

<figure data-bind="?">
<img src="a.jpg" />
<img src="b.jpg" />
<img src="c.jpg" />
......
.......
<figcaption>Image title</figcaption>
</figure>

there are many <img /> elements and only one figcaption.

how to write the data-bind ?

Answer 1

Just create observable array, like this:

var A = (function() {
    function A()
    {
        this.images = ko.observableArray(['a.jpg', 'b.jpg', 'c.jpg']);
    }

    return A;
})();

ko.applyBindings(new A());

And the HTML:

<figure>
    <!-- ko foreach: images -->
        <img data-bind="attr: {src: $data}">
    <!-- /ko -->
    <figcaption>Image title</figcaption>
</figure>

Working demo here.