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",
initialize : function ( options ) {
this.$el.data( 'view_object', this );
},
click_handler : function ( event ) {
event.preventDefault();
var tune =
$( event.target ).closest( ".tune" ).data( 'view_object' );
console.log( tune.id + " clicked" );
},
render : function () {
this.$el.html(
'<a href="" class="button">' + this.id + '</a>'
);
return this;
}
} );
var ClosedTune = Tune.extend( {
initialize : function ( options ) {
this.constructor.__super__.initialize.call( this, options );
}
} );
var OpenTune = Tune.extend( {
events : {
"click .button" : 'click_handler'
}
} );
var TuneBook = Backbone.View.extend( {
events : {
"click .tune .button" : Tune.prototype.click_handler
},
add_tune : function ( 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>