How to bind multiple images to graphic elements using knockout.js

happy

I would like to generate the output below with gene knockout.

<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, only one figcaption.

How to write data binding?

nhaa123

Just create the 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());

Japanese HTML:

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

Working demo here .

Related

How to bind multiple images to graphic elements using knockout.js

happy I would like to use knock to generate the output below. <figure data-bind="?"> <img src="a.jpg" /> <img src="b.jpg" /> <img src="c.jpg" /> ...... ....... <figcaption>Image title</figcaption> </figure> <img />There are many elements , only one figcaption

How to bind multiple images to graphic elements using knockout.js

happy I would like to generate the output below with gene knockout. <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, only one figca

How to bind multiple events in data binding using knockout

Noiti New to knockout JS. I'm still learning stuff. I am trying to bind multiple events in a single data binding. How can I do this? I need to execute 2 functions on a single event. HTML <span class="btn btn-default btn-file btn-primary">Browse<input type="fil

How to load images in knockout js?

Narasimha Reddy I am using html binding as below < img data-bind="attr: { href: movieUrl }" width="200" height="300"/> and use in KO view model as follows this.movieUrl = ko.observable("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRd7Cufx4u8LrlQ2TBS

How to load images in knockout js?

Narasimha Reddy I am using html binding as below < img data-bind="attr: { href: movieUrl }" width="200" height="300"/> and use in KO view model as follows this.movieUrl = ko.observable("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRd7Cufx4u8LrlQ2TBS