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 id="main-nav"></ul>

CSS

.hover {
    background: #eee;
}

JavaScript

var MenuItemView = Backbone.View.extend({
    tagName: 'li',
    className:'menu-item',
    events: {
        'hover a':'handleHover',
    },
    initialize: function() {
    }, 
    render: function() {
        this.el = $('<li class="menu-item"><a>' + this.cid + '</a></li>');
        this.delegateEvents();
        return this;
    },
    handleHover: function(ev) {
        $(ev.target).toggleClass('hover');
    }
});
for(var i = 0; i < 5; ++i) {
    var mi = new MenuItemView();
    mi.render();
    $('#main-nav').append(mi.el);
}