l'appel de javascript sur le rendu des vues de la colonne vertébrale js. post-rendu de rappel?

Mon approche habituelle pour ce genre de chose est d'utiliser setTimeout avec un délai d'attente de zéro pour organiser quelque chose se passe une fois que le navigateur obtient de nouveau le contrôle. Essayez ceci:

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

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

    return this;
}

Ou, si renderScatterChart est déjà lié à la appropriée this:

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

Vous pouvez également utiliser _.reporter si vous voulez être plus explicite sur ce que vous êtes jusqu'à:

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

Reporte l'invocation de la fonction jusqu'à ce que le courant de la pile des appels est désactivée, similaire à l'aide de setTimeout avec un retard de 0.

De sorte que vous pourriez aussi faire comme ceci:

//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;
}

C'est parce que vous exécutez le rendu avant .el est inséré dans les DOM. Vérifier mon auto code explicatif(exécuter dans une page vierge avec Backbone.js inclus):

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();

Eu le même problème que vous n'avez...avec highcharts. J'ai été à l'aide de la colonne vertébrale.LayoutManager, et a terminé à bidouiller le code pour ajouter un postRender de rappel. Aimerais voir cela comme une partie de Backbone.js

Eh bien cela a déjà été répondu, mais pour l'avenir de référence, j'ai eu ce problème plusieurs fois. Je l'ai résolu en ajoutant des événements personnalisés, dans ce cas, il pourrait être quelque chose comme

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

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

  return this;
}

Et puis, quand j'ai ajouter l'élément du DOM, je déclencheur comme

myView.trigger('someView:append');

Maintenant, ce n'est certainement pas une belle solution. Vous ajoutez la responsabilité du déclenchement de cet événement pour tout ce qui est en ajoutant le rendu de la vue vers les DOM. Selon la façon dont votre code est structuré, il peut être meilleur ou pour le pire. Encore une fois, je suis en train de poster cela comme une future référence et alternative.

Plus d'infos: http://backbonejs.org/#Events