Как настроить триггер события для элемента DOM, пока базовые представления все еще собирают элементы DOM?

#javascript #backbone.js #flot

#javascript #backbone.js #flot

Вопрос:

В настоящее время магистральный маршрутизатор настроен так, что он постепенно проходит через каждый из шаблонов (шаблонов jquery) и ассимилирует различные части представления в зависимости от состояний модели.

В каком-то методе маршрутизатора я вызываю lhsview.render и rhsview.render

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

В 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);
   }
  

Проблема с вызовом $.plot() заключается в том, что div с id=graph еще не присоединен к DOM. Как я могу гарантировать, что смогу установить $.plot() в div с id=graph в тот момент, когда он попадает в DOM в самом методе initializeGraph?

Ответ №1:

Если #graph элемент является частью вашего представления el , вы можете получить к нему доступ, вызвав this.$("#graph") его из своего представления

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

Это позволит правильно выбрать #graph , а затем отобразить все на нем. Затем, когда вы добавите элемент в DOM, он будет отображаться правильно.

Я часто использую это для предварительной визуализации информации в памяти перед добавлением ее в DOM.

Комментарии:

1. Потрясающий Дерик. Сработало отлично.