JSFiddle - React, Tailwind, and code Playground
HTML
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"></script>
<script type="text/javascript">
$( document ).ready( function () {
var Tune = Backbone.View.extend( {
className : "tune",
click_handler : function ( event ) {
event.preventDefault();
console.log( this.id + " clicked" );
},
render : function () {
this.$el.html(
'<a href="" class="button">' + this.id + '</a>'
);
return this;
}
} );
var ClosedTune = Tune.extend( {} );
var OpenTune = Tune.extend( {
events : {
"click .button" : 'click_handler'
}
} );
var TuneBook = Backbone.View.extend( {
events : {
"click .tune .button" : 'click_handler'
},
click_handler : function ( event ) {
var tune = this.options.tunes[
$( event.target ).closest( ".tune" ).attr( 'id' )
];
tune.click_handler( event );
},
add_tune : function ( tune ) {
this.options.tunes[ tune.id ] = tune;
this.$el.append( tune.render().el );
},
render : function () {
$( "body" ).append( this.el );
return this;
}
} );
var tune_book = new TuneBook( {
tunes : {}
} );
[ 1, 2, 3 ].forEach( function ( number ) {
tune_book.add_tune( new ClosedTune( {
id : "closed-tune-" + number
} ) );
} );
tune_book.render();
var open_tune = new OpenTune( {
id : "open-tune-1"
} );
$( "body" ).append( open_tune.render().el );
} );
</script>