Defining root Backbone element in template

view.patch

diff --git a/backbone.js b/backbone.js
index b16499a..f484f19 100644
--- a/backbone.js
+++ b/backbone.js
@@ -1170,7 +1170,7 @@
   var View = Backbone.View = function(options) {
     this.cid = _.uniqueId('view');
     _.extend(this, _.pick(options, viewOptions));
-    this._ensureElement();
+    if (!this.templateEl) this._ensureElement();
     this.initialize.apply(this, arguments);
   };
 
@@ -1178,7 +1178,7 @@
   var delegateEventSplitter = /^(\S+)\s*(.*)$/;
 
   // List of view options to be set as properties.
-  var viewOptions = ['model', 'collection', 'el', 'id', 'attributes', 'className', 'tagName', 'events'];
+  var viewOptions = ['model', 'collection', 'el', 'id', 'attributes', 'className', 'tagName', 'events', 'templateEl'];
 
   // Set up all inheritable **Backbone.View** properties and methods.
   _.extend(View.prototype, Events, {
@@ -1194,15 +1194,33 @@
 
     // Initialize is an empty function by default. Override it with your own
     // initialization logic.
-    initialize: function(){},
+    initialize: function() {},
+
+    template: function() {},
 
     // **render** is the core function that your view should override, in order
     // to populate its element (`this.el`), with the appropriate HTML. The
     // convention is for **render** to always return `this`.
     render: function() {
+      var html = _.result(this, 'template');
+      this._render(html);
       return this;
     },
 
+    _render: function(html) {
+      if (this.templateEl) {
+        var $el = Backbone.$(html);
+        if (this.$el) {
+          $el.insertBefore(this.$el);
+          this.$el.remove();
+        }
+        this.setElement($el);
+      } else {
+        this._setAttributes(this._attributes());
+        this.$el.html(html);
+      }
+    }
+
     // Remove this view by taking the element out of the DOM, and removing any
     // applicable Backbone.Events listeners.
     remove: function() {
@@ -1298,17 +1316,21 @@
     // matching element, and re-assign it to `el`. Otherwise, create
     // an element from the `id`, `className` and `tagName` properties.
     _ensureElement: function() {
-      if (!this.el) {
-        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._createElement(_.result(this, 'tagName')));
-        this._setAttributes(attrs);
-      } else {
+      if (this.el) {
         this.setElement(_.result(this, 'el'));
+      } else {
+        this.setElement(this._createElement(_.result(this, 'tagName')));
+        this._setAttributes(this._attributes());
       }
     },
 
+    _attributes: function() {
+      var attrs = _.extend({}, _.result(this, 'attributes'));
+      if (this.id) attrs.id = _.result(this, 'id');
+      if (this.className) attrs['class'] = _.result(this, 'className');
+      return attrs;
+    },
+
     // Set attributes from a hash on this view's element.  Exposed for
     // subclasses using an alternative DOM manipulation API.
     _setAttributes: function(attributes) {