Skip to content

Instantly share code, notes, and snippets.

@AndrewHenderson

AndrewHenderson/index.html

Created November 5, 2012 02:18
Show Gist options
  • Save AndrewHenderson/4014945 to your computer and use it in GitHub Desktop.
Save AndrewHenderson/4014945 to your computer and use it in GitHub Desktop.
Download ZIP
Demo: How to Effectively Remove Backbone Views to Avoid Memory Leaks
Raw
index.html
<!DOCTYPE HTML>
<html>
<head>
<title>Backbone Memory Management</title>
<link href="style.css">
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body>
<div id="app" class="container">
<h1>Zombie Destroyer 3000</h1>
<button id="add" class="btn btn-primary">Add</button> <button id="remove-all" class="btn btn-primary">Remove All</button>
<ol id="bin"></ol>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.2/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" src="script.js"></script>
</body>
</html>
Raw
script.js
// Model
// ------------------
var Model = Backbone.Model.extend({
defaults: {
text: 'Zombie'
}
});
// View
// ------------------
var View = Backbone.View.extend({
tagName: 'li',
className: 'zombie',
template: _.template('<%= text %>'),
initialize: function () {
this.model.on( 'change', this.render, this );
this.options.parent.on( 'close:all', this.close, this );
},
events: {
'click': 'close'
},
render: function () {
this.$el.html( this.template( this.model.toJSON() ));
return this;
},
close: function () {
console.log('Kill: ', this);
this.unbind(); // unbind all internal event bindings
this.model.unbind( 'change', this.render, this ); // unbind reference to the model
this.options.parent.unbind( 'close:all', this.close, this ); // unbind reference to the parent view
this.remove();
delete this.$el; // delete any jQuery wrapped objects
delete this.el; // delete the variable reference to this node
}
});
// App Level View
// ------------------
var AppView = Backbone.View.extend({
el: '#app',
events: {
'click #add': 'addView',
'click #remove-all': 'closeAll'
},
addView: function () {
var model = new Model();
var view = new View({
model: model,
parent: this
});
$('#bin').append(view.render().el);
},
closeAll: function () {
this.trigger('close:all');
}
});
// DOC Ready
// ------------------
$(function() {
var appView = new AppView();
});
@ambicoder
Copy link

what the code in line 26 does? this.options.....

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment