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

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 2

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