JSFiddle - React, Tailwind, and code Playground

by nilgundag

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<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="http://underscorejs.org/underscore.js"></script>

JavaScript

var Client = Backbone.Model.extend({});
var Colony = Backbone.Collection.extend({
    url: "http://search.twitter.com/search.json?q=istanbul&callback=?",
    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.toJSON());
        var view = new ClientView({
            model: item
        });
        $(this.el).append(view.render().el);
    },
    addAll: function(){
        var self = this;
        this.collection.each(function(item){
            console.log("addAll",item.toJSON());
            self.addOne(item);
        });
    },
    render: function(){
        this.addAll();
        return this;
    }
});


var colony = new Colony([{
    ip: '127.0.0.1',
    name: 'localhost.localdomain',
    lsup: 'now'
}]);
console.log(colony);
setInterval(function(){
    colony.fetch({
        update: true
    });
}, 50*1000);

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