JSFiddle - React, Tailwind, and code Playground

by chiefGui

HTML

<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="http://backbonejs.org/backbone-min.js"></script>
<div class="items"></div>

CSS

.item {
    width: 200px;
    height: 200px;
    display: inline-block;
}

.item img {
    width: 100%;
    height: 100%;
}

JavaScript

var Item = Backbone.Model.extend();

var Items = Backbone.Collection.extend({
    url: '//api.getchute.com/v2/albums/aC10byok/assets',
    model: Item
});

Backbone.EventAggregator = _.extend({}, Backbone.Events);

var PubSub = {
    address: function (subscription) {
        this.subscription = {
            stream: subscription,
            data: subscription.toJSON()[0].data[0]
        };
        return this;
    },
    listen: function (milliseconds) {
        this.setInitialState(this.subscription.data);
        
        setInterval(function () {
            this.subscription.stream.fetch({ data: { page: 1  }, success: function (x, y) {
                console.log(x, y);
            }});
            
            this.setCurrentState
                (this.subscription.stream.toJSON()[0].data[0]);
            
            if (this.isUpdateAvailable()) {
                Backbone
                    .EventAggregator
                    .trigger('items:updated', this.getCurrentState());
            };
        }.bind(this), milliseconds);
    },
    setInitialState: function (state) {
        this.initialState = state;
    },
    getInitialState: function () {
        return this.initialState;
    },
    setCurrentState: function (state) {
        this.currentState = state;
    },
    getCurrentState: function () {
        return this.currentState;
    },
    isUpdateAvailable: function () {
        var currentDate   = new Date(this.getCurrentState().created_at)
            , initialDate = new Date(this.getInitialState().created_at);
        
        if (initialDate < currentDate) {
            return true;
        };
        
        return false;
    }
};

var view = Backbone.View.extend({
    el: '.items',
    initialize: function () {
        this.items = new Items;
        
        this.listenTo(this.items, 'reset', function (items) {
            this.renderItems(items);
            
            PubSub.address(items).listen(2000);
        }.bind(this));
     ...