Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 14 down vote favorite
9

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.

share|improve this question

7 Answers

up vote 26 down vote accepted

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;
}
share|improve this answer
2  
omg. i'm in total disbelief that this worked. – whatbird Feb 5 '12 at 5:10
1  
@whatbird: This setTimeout(..., 0) trick just sets up a function to be called when your JavaScript is all done and control returns to the browser. So your code will set everything up and add everything to the DOM, then the browser takes over and triggers the delayed function. This trick is a bit of a hack but a useful one. – mu is too short Feb 5 '12 at 5:51
2  
@DanielAranda: But that forces the caller to know about the view's implementation details and do non-standard things with your view. So it is a question of which sort of kludge you want (or which one is possible under the local circumstances). – mu is too short Jul 19 '12 at 20:11
1  
@muistooshort I agree you, I know that is not mandatory too insert the View's element before render it; I always try to avoid the use of setTimeout, in this case I know that the problem is related to the DOM injection and I shared an example of how to fix it without use the setTimeout hack. – Daniel Aranda Jul 19 '12 at 20:29
1  
this worked for me but made me feel unclean. maybe a Backbone.Mixin with a render override would be better to centralize this hack in one place. – Casey Jul 21 '12 at 8:06
show 3 more comments
up vote 24 down vote

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.

share|improve this answer
up vote 1 down vote

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

share|improve this answer
up vote 1 down vote

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

share|improve this answer
up vote 1 down vote

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();
share|improve this answer
up vote 1 down vote

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.

share|improve this answer
up vote 0 down vote

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

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.