Merge branch 'master' of github.com:documentcloud/backbone

backbone.js

@@ -1201,9 +1201,19 @@
       return this;
     },
 
+    // Clean up references to this view in order to prevent latent effects and
+    // memory leaks.
+    dispose: function() {
+      this.undelegateEvents();
+      if (this.model) this.model.off(null, null, this);
+      if (this.collection) this.collection.off(null, null, this);
+      return this;
+    },
+
     // Remove this view from the DOM. Note that the view isn't present in the
     // DOM by default, so calling this method may be a no-op.
     remove: function() {
+      this.dispose();
       this.$el.remove();
       return this;
     },
@@ -1290,8 +1300,8 @@
     _ensureElement: function() {
       if (!this.el) {
         var attrs = _.extend({}, getValue(this, 'attributes'));
-        if (this.id) attrs.id = this.id;
-        if (this.className) attrs['class'] = this.className;
+        if (this.id) attrs.id = getValue(this, 'id');
+        if (this.className) attrs['class'] = getValue(this, 'className');
         this.setElement(this.make(getValue(this, 'tagName'), attrs), false);
       } else {
         this.setElement(this.el, false);

examples/todos/index.html

@@ -52,7 +52,7 @@
   <script type="text/template" id="item-template">
     <div class="view">
       <input class="toggle" type="checkbox" <%= done ? 'checked="checked"' : '' %> />
-      <label><%= title %></label>
+      <label><%- title %></label>
       <a class="destroy"></a>
     </div>
     <input class="edit" type="text" value="<%= title %>" />

index.html

@@ -387,6 +387,7 @@
       <li>– <a href="#View-dollar">$ (jQuery or Zepto)</a></li>
       <li>– <a href="#View-render">render</a></li>
       <li>– <a href="#View-remove">remove</a></li>
+      <li>– <a href="#View-dispose">dispose</a></li>
       <li>– <a href="#View-make">make</a></li>
       <li>– <a href="#View-delegateEvents">delegateEvents</a></li>
       <li>– <a href="#View-undelegateEvents">undelegateEvents</a></li>
@@ -2354,8 +2355,15 @@ var Bookmark = Backbone.View.extend({
     <p id="View-remove">
       <b class="header">remove</b><code>view.remove()</code>
       <br />
-      Convenience function for removing the view from the DOM. Equivalent to calling
-      <tt>view.$el.remove();</tt>
+      <a href="#View-dispose">Dispose</a> of the view before removing it from
+      the DOM via <tt>view.$el.remove()</tt>.
+    </p>
+
+    <p id="View-dispose">
+      <b class="header">dispose</b><code>view.dispose()</code>
+      <br />
+      Clean up any references to the view in order to prevent unwanted latent
+      effects and memory leaks.
     </p>
 
     <p id="View-make">
@@ -2575,18 +2583,18 @@ var model = localBackbone.Model.extend(...);
         <img width="550" height="416" data-original="docs/images/flow.png" alt="Flow" class="example_image" />
       </a>
     </div>
-    
-    
+
+
   	<h2 id="examples-wordpress">WordPress.com</h2>
 
   	<p>
-  		<a href="http://wordpress.com/">WordPress.com</a> is the software-as-a-service 
-  		version of <a href="http://wordpress.org">WordPress</a>. It uses Backbone.js 
-  		Models, Collections, and Views in its 
+  		<a href="http://wordpress.com/">WordPress.com</a> is the software-as-a-service
+  		version of <a href="http://wordpress.org">WordPress</a>. It uses Backbone.js
+  		Models, Collections, and Views in its
   		<a href="http://en.blog.wordpress.com/2012/05/25/notifications-refreshed/">Notifications system</a>.  Backbone.js was selected
-  		because it was easy to fit into the structure of the application, not the 
-  		other way around. <a href="http://automattic.com">Automattic</a> 
-  		(the company behind WordPress.com) is integrating Backbone.js into the 
+  		because it was easy to fit into the structure of the application, not the
+  		other way around. <a href="http://automattic.com">Automattic</a>
+  		(the company behind WordPress.com) is integrating Backbone.js into the
   		Stats tab and other features throughout the homepage.
   	</p>
 

test/view.js

@@ -135,6 +135,20 @@ $(document).ready(function() {
     ok(!view.el);
   });
 
+  test("View: with className and id functions", 2, function() {
+    var View = Backbone.View.extend({
+      className: function() {
+        return 'className';
+      },
+      id: function() {
+        return 'id';
+      }
+    });
+    var view = new View();
+    strictEqual(view.el.className, 'className');
+    strictEqual(view.el.id, 'id');
+  });
+
   test("View: with attributes", 2, function() {
     var view = new Backbone.View({attributes : {'class': 'one', id: 'two'}});
     equal(view.el.className, 'one');
@@ -227,4 +241,28 @@ $(document).ready(function() {
     ok(new View().$el.is('p'));
   });
 
+  test("dispose", 0, function() {
+    var View = Backbone.View.extend({
+      events: {click: function(){ ok(false); }},
+      initialize: function() {
+        this.model.on('all x', function(){ ok(false); }, this);
+        this.collection.on('all x', function(){ ok(false); }, this);
+      }
+    });
+    var view = new View({
+      model: new Backbone.Model,
+      collection: new Backbone.Collection
+    });
+    view.dispose();
+    view.model.trigger('x');
+    view.collection.trigger('x');
+    view.$el.click();
+  });
+
+  test("view#remove calls dispose.", 1, function() {
+    var view = new Backbone.View();
+    view.dispose = function() { ok(true); };
+    view.remove();
+  });
+
 });