Backbone.js jQuery rendering timing issue

Question

У меня есть приложение, которое я разрабатывал какое-то время, теперь всегда на локальной машине. Теперь я помещаю его в серверную среду и имею проблемы, которые, как мне кажется, связаны с синхронизацией функции .html() jQuery при вставке шаблона в представление Backbone.

к коду (важные части):

application.js

define(["models/mapModel", 
     "views/base/mapView"],function(MapModel, MapView){ 
    var initialize = function(){ 

    // Set up the application here 
    var mapModel, mapView; 

    dojo.ready(function(){ 

     mapModel = new MapModel(); 

     mapView = new MapView({ 
      model : mapModel 
     }); 

     $("#appRoot").html(mapView.render().el); 

    }); 
    }; 

    return { 
    initialize: initialize 
    }; 
}); 

ViewTemplate.html

<div id="map">map goes here</div> 

mapView.js

// 'viewTemplate' is being retrieved with dojo's define() method, 
    // this is not the issue as it is working in many other places. 

    initialize : function(){ 
     var selectFeature = lang.hitch(this, this.getFeature); 
     topic.subscribe("selectFeature", selectFeature); 
    }, 
    render : function(){ 
     var tmpl = _.template(viewTemplate); 
     this.$el.html(tmpl()); 
     this.model.on("change:map", this.createLocator, this); 

     //Create the map once everything is drawn 
     $(document).ready($.proxy(
      function() { 
       this.createMap(); 
      }, 
     this)); 

     return this; 
    }, 
    createMap : function(){ 
     console.log($('#appRoot').length); // returns 1 
     console.log($('#map').length);  // returns 0 
    } 

Моя проблема проиллюстрирована двумя строками в функции CreateMap. #appRoot статически определяется в index.html, а #map вставляется функцией jQuery .html() в рендеринге. Похоже, что элемент #map не вставлен к моменту создания CreateMap(). Опять же, это происходит только при ударе приложения с компьютера, отличного от localhost.

Благодаря JP

Answer 1

Попробуйте this.$('#map').length.

$('#map').length не работает, потому что #map еще не добавлен на страницу, так как вы вызываете рендер перед его добавлением.

$("#appRoot").html(mapView.render().el); // render view, затем добавление на страницу.

Код ниже также исправит его, но с использованием this.$ все равно.

$("#appRoot").html(mapView.el); // add to page 
mapView.render(); // render