JSFiddle - React, Tailwind, and code Playground

by Eric Howe

HTML

<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
<ul></ul>

CSS

li {
    display: block;
    margin: 5px;
    background-color: #eee;
    cursor: pointer;
}

JavaScript

var AppState  = Backbone.Model.extend({});
var app_state = new AppState;

var House = Backbone.Model.extend({});
var HouseListElemView = Backbone.View.extend({
    tagName: 'li',
    events: {
        'click': 'set_current_house'
    },
    render: function() {
        this.$el.append('House ' + this.model.id);
        return this;
    },
    set_current_house: function() {
        app_state.set('current_house', this.model.id);
    }
});

var MapView = Backbone.View.extend({
    el: '.map',
    initialize: function() {
        _.bindAll(this, 'show_house');
        app_state.on('change:current_house', this.show_house);
    },
    show_house: function(m) {
       console.log('show house', m.get('current_house'));
    }
});
new MapView;

var i, m, v;
for(i = 1; i < 11; ++i) {
    m = new House({ id: i });
    v = new HouseListElemView({ model: m });
    $('ul').append(v.render().el);
}