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>
<div id="view-goes-here"></div>

CSS

#view-goes-here {
    padding: 50px;
    border: 1px solid black;
}

JavaScript

var genres = [
    'Punk Rock',
    'Ska',
    'Frank Zappa'
];

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

var Genres = Backbone.View.extend({
    events: {
        'click li': 'choose'
    },
    tag: 'ul',
    render: function() {
        for(var i = 0; i < genres.length; ++i)
            this.$el.append('<li>' + genres[i] + '</li>');
        return this;
    },
    choose: function(ev) {
        app_state.set({genre: $(ev.target).html() });
    },
});
var Genre = Backbone.View.extend({
    initialize: function() {
        _.bindAll(this, 'change_genre');
        app_state.on('change:genre', this.change_genre);
    },
    render: function() {
        this.$el.append('<p>no genre selected</p>');
        return this;
    },
    change_genre: function() {
        this.$('p').html(app_state.get('genre'));
    }
});

$('#view-goes-here').append((new Genres).render().el);
$('#view-goes-here').append('<hr>');
$('#view-goes-here').append((new Genre).render().el);