backbone.js View View's initialize function

Example

initialize is called by Backbone right after a View is constructed.

Optional parameters

The initialize function receives any arguments passed to the view's constructor. Commonly, the options hash that is used to pass the view's default options:

['model', 'collection', 'el', 'id', 'attributes', 'className', 'tagName', 'events']

You can add any custom attributes to the options hash, and/or custom parameters.

var MyView = Backbone.View.extend({
    initialize: function(options, customParam){
        // ensure that the 'options' is a hash to avoid errors if undefined.
        options = options || {};
        this.customAttribute = options.customAttribute;
        this.customParam = customParam;
    },
});

And constructing the view:

var view = new MyView({
    model: new Backbone.Model(),
    template: "<p>a template</p>",
    customAttribute: "our custom attribute"
}, "my custom param");

Note that the all the default view options are automatically added to the view object, so it's unnecessary to do that in the initialize function.

Immediately render pattern

One common pattern for the initialize method is to call the render method so that any newly constructed View is immediately rendered

This pattern should only be used in instances where constructing the object should immediately render it to the HTML document, bind all of the event listeners, and perform all the other actions associated with placing content in the DOM.

var MyView = Backbone.View.extend({
    initialize: function() {
        this.render();
    },

    render: function() {
        this.$el.html("<p>I'm running!</p>");
    }
});

It should be noted, however, that some Views should not be immediately rendered until .render is called manually (or by some other method).

Another common initialize pattern is to add things to the View object that will be needed later:

var MyView = Backbone.View.extend({
    el: "body",
    template: _.template( "<p>This is <%= name %>'s page</p>" ),

    initialize: function(){
        this.name = "Bill";
        
        this.render();
    },

    render: function(){
        var viewTemplateData = {
            name: this.name
        };

        this.$el.html( this.template( viewTemplateData ) );
    }
});

The DOM will now contain <p>This is Bill's page</p> in the body.