From 51387ebc363bb8a7e2974941e97083a8bad5bdc3 Mon Sep 17 00:00:00 2001
From: Genadi Samokovarov <gsamokovarov@gmail.com>
Date: Thu, 2 Aug 2012 01:18:46 +0300
Subject: [PATCH 1/4] getValue for View::className and View::id

---
 backbone.js  |  4 ++--
 test/view.js | 13 +++++++++++++
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/backbone.js b/backbone.js
index f401b08c..f0812fd3 100644
--- a/backbone.js
+++ b/backbone.js
@@ -1290,8 +1290,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);
diff --git a/test/view.js b/test/view.js
index a4da11ae..fcc06c42 100644
--- a/test/view.js
+++ b/test/view.js
@@ -135,6 +135,19 @@ $(document).ready(function() {
     ok(!view.el);
   });
 
+  test("View: with className and id functions", 2, function() {
+    var viewClass = Backbone.View.extend({
+      className: function() {
+        return 'one';
+      },
+      id: function() {
+        return 'two';
+      }
+    });
+    equal((new viewClass).el.className, 'one');
+    equal((new viewClass).el.id, 'two');
+  });
+
   test("View: with attributes", 2, function() {
     var view = new Backbone.View({attributes : {'class': 'one', id: 'two'}});
     equal(view.el.className, 'one');

From 281014319da3e5a1748416afa5bf5607313fafd2 Mon Sep 17 00:00:00 2001
From: Brad Dunbar <dunbarb2@gmail.com>
Date: Wed, 8 Aug 2012 11:40:54 -0400
Subject: [PATCH 2/4] Tweak id/className test.

---
 test/view.js | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/test/view.js b/test/view.js
index fcc06c42..88490804 100644
--- a/test/view.js
+++ b/test/view.js
@@ -136,16 +136,17 @@ $(document).ready(function() {
   });
 
   test("View: with className and id functions", 2, function() {
-    var viewClass = Backbone.View.extend({
+    var View = Backbone.View.extend({
       className: function() {
-        return 'one';
+        return 'className';
       },
       id: function() {
-        return 'two';
+        return 'id';
       }
     });
-    equal((new viewClass).el.className, 'one');
-    equal((new viewClass).el.id, 'two');
+    var view = new View();
+    strictEqual(view.el.className, 'className');
+    strictEqual(view.el.id, 'id');
   });
 
   test("View: with attributes", 2, function() {

From 71d0fe3dccffc01f7badba5af4b2cae1c5af1aa8 Mon Sep 17 00:00:00 2001
From: Ted Han <ted@knowtheory.net>
Date: Tue, 14 Aug 2012 00:31:41 -0500
Subject: [PATCH 3/4] escape todo items.

---
 examples/todos/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/examples/todos/index.html b/examples/todos/index.html
index e964fe16..46952fd2 100644
--- a/examples/todos/index.html
+++ b/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 %>" />

From 971a5fb3837ac5ee1d3272a7d7d38dc4553c4a86 Mon Sep 17 00:00:00 2001
From: Brad Dunbar <dunbarb2@gmail.com>
Date: Wed, 27 Jun 2012 09:53:00 -0400
Subject: [PATCH 4/4] Add View#dispose.

---
 backbone.js  | 10 ++++++++++
 index.html   | 28 ++++++++++++++++++----------
 test/view.js | 24 ++++++++++++++++++++++++
 3 files changed, 52 insertions(+), 10 deletions(-)

diff --git a/backbone.js b/backbone.js
index f0812fd3..850de24a 100644
--- a/backbone.js
+++ b/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;
     },
diff --git a/index.html b/index.html
index 86783820..57b3b62d 100644
--- a/index.html
+++ b/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>
 
diff --git a/test/view.js b/test/view.js
index 88490804..6f935119 100644
--- a/test/view.js
+++ b/test/view.js
@@ -241,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();
+  });
+
 });