calling javascript on rendering views in BackBone js. post-render callback?

Question

behold, a backbone view render call:

render: function() {
  $(this.el).html(this.template({title: 'test'}));  //#1
  this.renderScatterChart();
  return this;
},

so, I call a standard render at #1. and then, i call a method [this time, it is a wrapper for charting lib] that looks for a div. the div is rendered by the render call. but at this point, it is not attached to the DOM yet (right?). so the chart call sadly dies.

what is the pattern for this? i'd love hear that there is a post-render callback. i've tried a few hacks around this, and sometimes i get the chart to work, but events don't bind.

Answer 1

My usual approach for this sort of thing is to use setTimeout with a timeout of zero to arrange for something to happen once the browser gets control again. Try this:

render: function() {
    $(this.el).html(this.template({title: 'test'}));

    var _this = this;
    setTimeout(function() {
        _this.renderScatterChart();
    }, 0);

    return this;
}

Or, if renderScatterChart is already bound to the appropriate this:

render: function() {
    $(this.el).html(this.template({title: 'test'}));
    setTimeout(this.renderScatterChart, 0);
    return this;
}

You can also use _.defer if you want to be more explicit about what you're up to:

defer _.defer(function, [*arguments])

Defers invoking the function until the current call stack has cleared, similar to using setTimeout with a delay of 0.

So you could also do it like this:

// Assuming that `renderScatterChart` is bound to the appropriate `this`...
render: function() {
    $(this.el).html(this.template({title: 'test'}));
    _(this.renderScatterChart).defer();
    return this;
}

// or if it isn't bound...
render: function() {
    $(this.el).html(this.template({title: 'test'}));

    var _this = this;
    _(function() {
        _this.renderScatterChart();
    }).defer();

    return this;
}

Answer 2

I know this is answered, but thought I would share. Underscore js has this covered for you with the _.defer function.

render: function() {
    $(this.el).html(this.template({title: 'test'}));  //#1
    _.defer( function( view ){ view.renderScatterChart();}, this );
    return this;
},

According the the Underscore docs, this is effectively the same thing as the accepted solution.

Answer 3

It is because you run render before .el is inserted into the DOM. Check my self explanatory code(run in a blank page with Backbone.js included):

function someThirdPartyPlugin(id){
   if( $('#' +id).length ===0  ){
    console.log('Plugin crashed');
   }else{
    console.log('Hey no hacks needed!!!'); 
   }
}

var SomeView = Backbone.View.extend({
    id : 'div1',
    render : function(){
      this.$el.append("<p>Hello third party I'm Backbone</p>");
      someThirdPartyPlugin( this.$el.attr('id') );
      return this;
  }
}); 
var SomeView2 = Backbone.View.extend({
    id : 'div2',
    render : function(){
      this.$el.append("<p>Hello third party I'm Backbone</p>");
      someThirdPartyPlugin( this.$el.attr('id') );
      return this;
  }
}); 

var myView1 = new SomeView();
$('body').append( myView1.render().el );
var myView2 = new SomeView2();
$('body').append( myView2.el );
myView2.render();

Answer 4

You could just do this (if renderSactterChart operates on a 'jQuery-ized' object):

render: function() {
  this.$el.html(this.template({title: 'test'}));  //#1
  this.$el.renderScatterChart();
  return this;
},

(this is not the actual DOM element...)

Answer 5

Had the same problem as you did...with highcharts. I was using Backbone.LayoutManager, and ended up hacking the code to add a postRender callback. Would love to see this as a part of Backbone.js

Answer 6

If you don't want to use the setTimeout hack, I think this way is more 'normal':

Just pass the $el element to the function that needs to manipulate elements added by render() and then DOM manipulation can be done on $el.

Answer 7

Well this has already been answered, but for future reference I've had this problem a few times. I solved it by adding custom events, in this case it could be something like

render: function() {
  $(this.el).html(this.template({title: 'test'}));  //#1

  this.on('someView:append', function() {
      this.renderScatterChart();
  }, this);

  return this;
}

And then, when I append the element to the DOM, I trigger it like

myView.trigger('someView:append');

Now, it's certainly not a beatiful solution. You are adding the responsability of triggering this event to whatever is appending the rendered view to the DOM. Depending on how is your code structured it can fit better or worse. Again, I'm just posting this as a future reference and alternative.

More info: http://backbonejs.org/#Events

Answer 8

This should be done like so:

render: function() {
  Marionette.ItemView.prototype.render.apply(this, arguments);
  your code ...
}

sample with marionette but idea works for backbone views as well