Setting id and className dynamically in Backbone.js views

Question

I am in process of learning and using Backbone.js.

I have an Item model and a corresponding Item view. Each model instance has item_class and item_id attributes, that I

Answer 1

Summary: dynamically set view attributes with model data

http://jsfiddle.net/5wd0ma8b/

// View class with `attributes` method
var View = Backbone.View.extend( {
  attributes : function () {
    // Return model data
    return {
      class : this.model.get( 'item_class' ),
      id : this.model.get( 'item_id' )
    };
  }
  // attributes
} );

// Pass model to view constructor
var item = new View( {
  model : new Backbone.Model( {
    item_class : "nice",
    item_id : "id1"
  } )
} );

• This example assumes that you're allowing Backbone to generate a DOM element for you.

• The attributes method is called after the properties passed to the view constructor are set (in this case, model), allowing you to dynamically set the attributes with the model data before Backbone creates el.

• In contrast to some of the other answers: doesn't hard-code attribute values in the view class, dynamically sets them from model data; doesn't wait until render() to set attr vals; doesn't repeatedly set attr vals in every call to render(); doesn't unnecessarily manually set attr vals on DOM element.

• Note that if setting the class when calling Backbone.View.extend or a view constructor (e.g. new Backbone.View), you have to use the DOM property name, className, but if setting it via the attributes hash / method (as in this example) you have to use the attribute name, class.

• As of Backbone 0.9.9:

  When declaring a View...el, tagName, id and className may now be defined as functions, if you want their values to be determined at runtime.

  I mention this in case there's a situation where that would be useful as an alternative to using an attributes method as illustrated.

Using an existing element

If you're using an existing element (e.g. passing el to the view constructor)...

var item = new View( { el : some_el } );

...then attributes won't be applied to the element. If the desired attributes aren't already set on the element, or you don't want to duplicate that data in your view class and another location, then you may want to add an initialize method to your view constructor that applies attributes to el. Something like this (using jQuery.attr):

View.prototype.initialize = function ( options ) {
  this.$el.attr( _.result( this, 'attributes' ) );
};

Usage of el, rendering, avoiding the wrapper

In most examples I have seen, the view's el serves as a meaningless wrapper element inside which one has to manually write the 'semantic' code.

There's no reason view.el needs to be "a meaningless wrapper element". In fact, that would often break the DOM structure. If a view class represents a