Question

Currently the Backbone router is set up so that it gradually goes through each of the templates (jquery templates) and assimilates various parts of the view depending on model states.

In some router method I am calling lhsview.render and rhsview.render

    $(appView.el).append(this.lhsView.render().el);
    $(appView.el).append(this.rhsView.render().el);
    appView.render();

In rhsView,

    initialize : function(){
       this.initializeGraph();
    },
    initializeGraph : function(){
       $('#product-graph').tmpl({this.options.graph}).appendTo($(this.el));         
       // Call plot from jquery flot
       $.plot( $("#graph"), data, options);
   }

The problem with calling $.plot() is that the div with id=graph is not attached to the DOM yet. How can i ensure that I can set $.plot() on div with id=graph the moment it comes within the DOM in the initializeGraph method itself?

Answer 1

If the #graph element is part of your view’s el, you can access it by calling this.$("#graph") from within your view

RHSView = Backbone.View.extend({
  initializeGraph: function(){
    $('#product-graph').tmpl({this.options.graph}).appendTo($(this.el));         

    // if your template generated the #graph
    // then it will be available from within this
    // view's el
    var graph = this.$("#graph");

    $.plot(graph, data, options);
  }
});

This will correctly select the #graph and then plot everything on it. Then, when you add the element to the DOM, it will show up correctly.

I use this a lot to pre-render information in memory before appending it to the DOM.