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 th         


        

Answer 1

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

Answer 2

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 3

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 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

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 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.