Various clean up and optimizations

backbone.js

@@ -1031,20 +1031,28 @@
       return this;
     },
 
-    // Remove this view by taking the element out of the DOM, and removing any
-    // applicable Backbone.Events listeners.
+    // Remove this view by taking the element out of the document, remove all
+    // the DOM event listeners attached to it, and remove any applicable
+    // Backbone.Events listeners.
     remove: function() {
-      this.$el.remove();
+      this.undelegateEvents();
+      this._removeElement();
       this.stopListening();
       return this;
     },
 
+    // Remove this view's element from the document and remove all the event
+    // listeners attached to it. Useful for subclasses to override in order to
+    // utilize an alternative DOM manipulation API.
+    _removeElement: function() {
+      this.$el.remove();
+    },
+
     // Change the view's element (`this.el` property), including event
     // re-delegation.
     setElement: function(element, delegate) {
-      if (this.$el) this.undelegateEvents();
-      this.$el = element instanceof Backbone.$ ? element : Backbone.$(element);
-      this.el = this.$el[0];
+      this.undelegateEvents();
+      this._createContext(element);
       if (delegate !== false) this.delegateEvents();
       return this;
     },
@@ -1067,49 +1075,49 @@
     delegateEvents: function(events) {
       if (!(events || (events = _.result(this, 'events')))) return this;
       this.undelegateEvents();
+      var _delegate = this._delegate;
       for (var key in events) {
         var method = events[key];
         if (!_.isFunction(method)) method = this[events[key]];
         if (!method) continue;
 
         var match = key.match(delegateEventSplitter);
         var eventName = match[1], selector = match[2];
-        this.delegate(eventName, selector, method);
+        method = method.bind && method.bind(this) || _.bind(method, this);
+        _delegate.call(this, eventName, selector, method);
       }
       return this;
     },
 
-    // Clears all callbacks previously bound to the view with `delegateEvents`.
-    // You usually don't need to use this, but may wish to if you have multiple
-    // Backbone views attached to the same DOM element.
-    undelegateEvents: function() {
-      this.$el.off('.delegateEvents' + this.cid);
-      return this;
-    },
-
-    // Add a single event listener to the element.
-    delegate: function(eventName, selector, method) {
-      if (_.isFunction(selector)) {
-        method = selector;
-        selector = undefined;
-      }
+    // Add a single event listener to the element responding only to the
+    // optional `selector` or catches all `eventName` events. Subclasses can
+    // override this to utilize an alternative DOM event management API.
+    _delegate: function(eventName, selector, method) {
       eventName += '.delegateEvents' + this.cid;
       if (!selector) {
-        this.$el.on(eventName, _.bind(method, this));
+        this.$el.on(eventName, method);
       } else {
-        this.$el.on(eventName, selector, _.bind(method, this));
+        this.$el.on(eventName, selector, method);
       }
+    },
+
+    // Clears all callbacks previously bound to the view by `delegateEvents`.
+    // You usually don't need to use this, but may wish to if you have multiple
+    // Backbone views attached to the same DOM element.
+    undelegateEvents: function() {
+      if (this.$el) this.$el.off('.delegateEvents' + this.cid);
       return this;
     },
 
-    // For hooking into small amounts of DOM Elements, where a full-blown template isn't
-    // needed, use **make** to manufacture elements, one at a time.
-    //
-    //     var el = this.make('li', {'class': 'row'}, this.model.escape('title'));
-    //
-    make: function(tagName, attributes, content) {
-      var $el = Backbone.$('<' + tagName + '>', attributes).html(content);
-      return $el[0];
+    // Creates the actual context for this view using the given `root` and a
+    // hash of `attributes` and returns the created element. `root` can be a CSS
+    // selector or an HTML string, a jQuery context or and Element. Subclasses
+    // can override this to utilize and alternative DOM manipulation API.
+    _createContext: function(root, attributes) {
+      var $el = root instanceof Backbone.$ ? root : Backbone.$(root);
+      $el.attr(attributes || {});
+      this.$el = $el;
+      this.el = $el[0];
     },
 
     // Ensure that the View has a DOM element to render into.
@@ -1121,7 +1129,8 @@
         var attrs = _.extend({}, _.result(this, 'attributes'));
         if (this.id) attrs.id = _.result(this, 'id');
         if (this.className) attrs['class'] = _.result(this, 'className');
-        this.setElement(this.make(_.result(this, 'tagName'), attrs), false);
+        this._createContext(document.createElement(_.result(this, 'tagName')), attrs);
+        this.setElement(this.el, false);
       } else {
         this.setElement(_.result(this, 'el'), false);
       }

test/view.js

@@ -26,20 +26,13 @@
     strictEqual(view.$('a b').html(), 'test');
   });
 
-  test("make", 3, function() {
-    var div = view.make('div', {id: 'test-div'}, "one two three");
+  test("_createContext", 4, function() {
+    view._createContext('<div>', {id: 'test-div'});
 
-    equal(div.tagName.toLowerCase(), 'div');
-    equal(div.id, 'test-div');
-    equal($(div).text(), 'one two three');
-  });
-
-  test("make can take falsy values for content", 2, function() {
-    var div = view.make('div', {id: 'test-div'}, 0);
-    equal($(div).text(), '0');
-
-    div = view.make('div', {id: 'test-div'}, '');
-    equal($(div).text(), '');
+    equal(view.el.tagName.toLowerCase(), 'div');
+    equal(view.el.id, 'test-div');
+    ok(view.$el instanceof Backbone.$);
+    equal(view.$el[0], view.el);
   });
 
   test("initialize", 1, function() {
@@ -76,15 +69,15 @@
     equal(counter2, 3);
   });
 
-  test("delegate", 2, function() {
+  test("_delegate", 2, function() {
     var counter1 = 0, counter2 = 0;
 
     var view = new Backbone.View({el: '#testElement'});
     view.increment = function(){ counter1++; };
     view.$el.on('click', function(){ counter2++; });
 
-    view.delegate('click', 'h1', view.increment);
-    view.delegate('click', view.increment);
+    view._delegate('click', 'h1', view.increment);
+    view._delegate('click', view.increment);
 
     view.$('h1').trigger('click');
     equal(counter1, 2);