JSFiddle - React, Tailwind, and code Playground

by scriptstar

HTML

<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
<div id="main">
    <div id="counter">Number of Users: </div>
    <hr>
</div>
<button>Add someone</button>

CSS

#main {
    padding: 50px;
    border: 1px solid black;
}

JavaScript

var User = Backbone.Model.extend({});
var OnlineUsers = Backbone.Collection.extend({
    model: User
});

var CounterView = Backbone.View.extend({
    tagName: 'span',
    initialize: function() {
        _.bindAll(this, 'render');
        this.collection.on('add', this.render);
    },
    render: function() {
        this.$el.text(this.collection.size());
        return this;
    }
});
var ListView = Backbone.View.extend({
    initialize: function() {
        _.bindAll(this, 'render');
        this.collection.on('add', this.render);
    },
    render: function() {
        var html = this.collection.map(function(m) {
            return '<li>' + m.get('name') + '</li>';
        });
        this.$el.html(html.join(''));
        return this;
    }
});

var online  = new OnlineUsers;
var counter = new CounterView({ collection: online });
var list    = new ListView(   { collection: online });
$('#counter').append(counter.render().el);
$('#main'   ).append(list.render().el);

$('button').click(function() {
    online.add({ name: 'Pancakes ' + (online.size() + 1) });
});