Backbone: Event lost in re-render
a playground setup with includes of backbone, jquery, underscore,...
HTML
<script src="http://documentcloud.github.com/underscore/underscore.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone.js"></script>
<div id="composer"></div>
<a href="#" onclick="window.view.render()">Composer.render()</a>
CSS
body {
font-family: sans-serif;
font-size: 20px
}
#composer div {
margin: 10px;
background-color: #ccc;
padding: 10px
}
JavaScript
var SubView = Backbone.View.extend({
events: {
"click": "click"
},
click: function(){
alert( "click!" );
},
render: function(){
this.$el.html( "click me" );
return this;
}
});
var Composer = Backbone.View.extend({
initialize: function(){
this.subView = new SubView();
},
render: function(){
console.log( "Composer.render" );
this.$el.html( this.subView.render().el );
}
});
window.view = new Composer({el: $('#composer')});
window.view.render();