JSFiddle - React, Tailwind, and code Playground

by Travis Harris

CSS

.my-image {
    width:132px;
    height:99px;
    display:inline;
}

JavaScript

enyo.kind({
    name: "App",
    kind: "enyo.Application",
    view: "Main",
    components: []
});
enyo.kind({
    name: "Main",
    used_ids: [],
    components: [{name: "imageCollection",kind: "enyo.Collection"},
                 {
        name: "repeater",
        kind: "enyo.DataRepeater",
        collection: "this.$.imageCollection",
        components: [{
            style: "display:inline",
            components: [{
                name: "theImage",
                kind: "enyo.Image",
                classes: "my-image",
                onload: "addImageUp"
            }],
            bindings: [{from: ".model.imgSrc",to: ".$.theImage.src"}],
            addImageUp: function () {
                if (this.owner.used_ids.indexOf(this.id) !== -1) {
                    return true;
                }
                this.owner.used_ids.push(this.id);
                this.owner.addImage();
                return true;
            }
        }]
    }],
    create: function () {
        this.inherited(arguments);
        this.imageIndex = 0;
        this.addImage();
    },
    addImage: function () {
        if (this.imageIndex > 24) {
            return true;
        }
        this.imageIndex++;
        this.$.imageCollection.add({
            imgSrc: "http://www.infoq.com/resource/" +
                "presentations/Enyo/en/slides/sl1.jpg?" + Math.random() + "-" + this.imageIndex,
            
        });
    }
});
enyo.ready(function () {
    new App({name: "app"});
});