Backbone.js event after view.render() is finished

Question

Does anyone know which event is fired after a view is rendered in backbone.js?

Answer 1

I ran into this post which seems interesting

var myView = Backbone.View.extend({ 

    initialize: function(options) { 
        _.bindAll(this, 'beforeRender', 'render', 'afterRender'); 
        var _this = this; 
        this.render = _.wrap(this.render, function(render) { 
            _this.beforeRender(); 
            render(); 
            _this.afterRender(); 
            return _this; 
        }); 
    }, 

    beforeRender: function() { 
       console.log('beforeRender'); 
    }, 

    render: function() { 
        return this; 
    }, 

    afterRender: function() { 
        console.log('afterRender'); 
    } 
});

Answer 2

Or you can do the following, which is what Backbone code is supposed to look like (Observer pattern, aka pub/sub). This is the way to go:

var myView = Backbone.View.extend({ 
    initialize: function() {  
        this.on('render', this.afterRender);

        this.render();
    },

    render: function () {  
        this.trigger('render');
    },

    afterRender: function () {
    }
});

Edit: this.on('render', 'afterRender'); will not work - because Backbone.Events.on accepts only functions. The .on('event', 'methodName'); magic is made possible by Backbone.View.delegateEvents and as such is only available with DOM events.

Answer 3

As far as I know - none is fired. Render function is empty in source code.

The default implementation of render is a no-op

I would recommend just triggering it manually when necessary.

Answer 4

If you happen to be using Marionette, Marionette adds show and render events on views. See this StackOverflow question for an example.

On a side note, Marionette adds a lot of other useful features that you might be interested in.

Answer 5

I realise this question is fairly old but I wanted a solution that allowed the same custom function to be called after every call to render, so came up with the following...

First, override the default Backbone render function:

var render = Backbone.View.prototype.render;
Backbone.View.prototype.render = function() {
    this.customRender();
    afterPageRender();
    render();
};

The above code calls customRender on the view, then a generic custom function (afterPageRender), then the original Backbone render function.

Then in my views, I replaced all instances of render functions with customRender:

initialize: function() {
    this.listenTo(this.model, 'sync', this.render);
    this.model.fetch();
},

customRender: function() {
    // ... do what you usually do in render()
}

Answer 6

Instead of adding the eventhandler manually to render on intialization you can also add the event to the 'events' section of your view. See http://backbonejs.org/#View-delegateEvents

e.g.

events: {
   'render': 'afterRender'
}

afterRender: function(e){
    alert("render complete")
},

Answer 7

 constructor: function(){
   Backbone.View.call(this, arguments);     
   var oldRender = this.render
   this.render = function(){
      oldRender.call(this)
      // this.model.trigger('xxxxxxxxx')
   }       
 }

like this http://jsfiddle.net/8hQyB/