JSFiddle - React, Tailwind, and code Playground

by Salvador Dali

HTML

<div data-bind="foreach: elements">
    <!-- ko template: {name: type } --><!-- /ko -->
</div>

<script type="text/html" id="img">
    <div data-bind="text: text"></div>
    <span data-bind="foreach: imgs">
        <img data-bind="attr: { 'src': $data}">
    </span>
    <div data-bind="if: !imgs().length">No images</div>
    <br><br><br>
</script>

JavaScript

function ViewModel() {
    this.elements = ko.observableArray([{
        type: 'img',
        text: 'fish',
        imgs: ko.observableArray([
            'http://c1.wag.com/images/products/rdg/rdg-010_Small2a.jpg',
            'https://www.uoguelph.ca/cio/sites/uoguelph.ca.cio/files/images/SmallFish_0.jpg'
        ])
    },{
        type: 'img',
        text: 'tanks',
        imgs: ko.observableArray([
            'http://www.foxnews.com/images/443099/2_41_092608_PiratesTanks.jpg',
        ])
    },{
        type: 'img',
        text: 'zebras',
        imgs: ko.observableArray([])
    }]);
}

ko.applyBindings(new ViewModel());