如何使用knockout.js将多个图像绑定到图元素

Question

我希望使用knockoutjs生成以下输出。

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

有许多<img />个元素，只有一个figcaption。

如何编写data-bind？

Answer 1

只需创建可观察的数组，如下所示：

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

    return A;
})();

ko.applyBindings(new A());

HTML：

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

工作演示here。