Add setAttributes for View

Users may decide to set className, id, or attributes with a function such that the values can change based on the view's state or model.

In general the user is expected to update these values manually once the element is set.  It isn't terribly hard to manage className or other attributes directly, but there is a little bit of logic regarding className and id overriding the attributes hash.

This simplifies answering how to update the el's attributes after initialization.

backbone.js

@@ -1448,11 +1448,8 @@
     // 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);
+        this.setAttributes();
       } else {
         this.setElement(_.result(this, 'el'));
       }
@@ -1462,6 +1459,19 @@
     // subclasses using an alternative DOM manipulation API.
     _setAttributes: function(attributes) {
       this.$el.attr(attributes);
+    },
+
+    // Set attributes from the passed in argument or the view options
+    // on this view's element.
+    setAttributes: function(attrs) {
+      if (!attrs) {
+        attrs = _.extend({}, _.result(this, 'attributes'));
+        if (this.id) attrs.id = _.result(this, 'id');
+        if (this.className) attrs['class'] = _.result(this, 'className');
+      }
+
+      this._setAttributes(attrs);
+      return this;
     }
 
   });

test/view.js

@@ -297,8 +297,8 @@
     assert.expect(2);
     var View = Backbone.View.extend({
       attributes: {
-        'id': 'id',
-        'class': 'class'
+        id: 'id',
+        class: 'class'
       }
     });
 
@@ -310,7 +310,7 @@
     assert.expect(1);
     var View = Backbone.View.extend({
       attributes: function() {
-        return {'class': 'dynamic'};
+        return {class: 'dynamic'};
       }
     });
 
@@ -323,8 +323,8 @@
       className: 'backboneClass',
       id: 'backboneId',
       attributes: {
-        'class': 'attributeClass',
-        'id': 'attributeId'
+        class: 'attributeClass',
+        id: 'attributeId'
       }
     });
 
@@ -513,4 +513,50 @@
     assert.notEqual($oldEl, myView.$el);
   });
 
+  QUnit.test('setAttributes', function(assert) {
+    assert.expect(4);
+    var View = Backbone.View.extend({
+      className: function() {
+        return this.foo ? 'fooClass' : 'backboneClass';
+      },
+      attributes: function() {
+        return {
+          class: 'attributeClass',
+          id: this.foo ? 'fooId' : 'attributeId'
+        };
+      }
+    });
+
+    var myView = new View;
+    assert.strictEqual(myView.el.className, 'backboneClass');
+    assert.strictEqual(myView.el.id, 'attributeId');
+    myView.foo = true;
+    myView.setAttributes();
+    assert.strictEqual(myView.el.className, 'fooClass');
+    assert.strictEqual(myView.el.id, 'fooId');
+  });
+
+  QUnit.test('setAttributes with attrs argument', function(assert) {
+    assert.expect(4);
+    var View = Backbone.View.extend({
+      className: function() {
+        return 'backboneClass';
+      },
+      attributes: {
+        class: 'attributeClass',
+        id: 'attributeId'
+      }
+    });
+
+    var myView = new View;
+    assert.strictEqual(myView.el.className, 'backboneClass');
+    assert.strictEqual(myView.el.id, 'attributeId');
+    myView.setAttributes({
+      class: 'setAttributeClass',
+      id: 'setAttributeId'
+    });
+    assert.strictEqual(myView.el.className, 'setAttributeClass');
+    assert.strictEqual(myView.el.id, 'setAttributeId');
+  });
+
 })(QUnit);