JSFiddle - React, Tailwind, and code Playground

by nilgundag

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.1/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></script>
<script src="https://cdn.deblan.org/ajax/libs/jquery-mockjax/1.5.1/jquery.mockjax.js"></script>

JavaScript

$.mockjax({
    url: "/presence/knock",
    responseTime: 750,
    contentType: "text/json",
    responseText: [{
            clients:[{
                    ip: '127.0.0.1',
                    name: 'localhost.localdomain',
                    lsup: 'now'
                    }]
    }]
});

var Client = Backbone.Model.extend();

var Colony = Backbone.Collection.extend({
    url: '/presence/knock',
    model: Client,
});

var ClientView = Backbone.View.extend({
    initialize: function(){
        this.render();
    },
    template: _.template('...'),
    render: function(){
        this.$el.html(this.template(this.model.toJSON()));
        return this;
    }
});

var ColonyView = Backbone.View.extend({
    initialize: function(){
        _.bindAll(this, 'addOne', 'addAll');

        this.collection.bind('add', this.addOne);
        this.collection.bind('refresh', this.addAll);
        this.collection.bind('change', this.addAll);
    },
    addOne: function(item){
        console.log('addOne', item, item.toJSON());
        var view = new ClientView({
            model: item
        });
        $(this.el).append(view.render().el);
    },
    addAll: function(){
        console.log('addAll', this.collection);
        var self = this;
        this.collection.each(function(item){
            self.addOne(item);
        });
    },
    render: function(){
        this.addAll();
        return this;
    }
});

var colony = new Colony([{
    ip: '127.0.0.1',
    name: 'localhost.localdomain',
    lsup: 'now'
}]);

setInterval(function(){
    colony.fetch({                
        update: true
    });
}, 5*1000);

var colonyView = new ColonyView({
    collection: colony
});
$("#clients-board").append(colonyView.render().el);