Backbone.js jQuery 렌더링 타이밍 문제

Question

저는 현재 로컬 컴퓨터에서 한동안 개발해온 응용 프로그램을 가지고 있습니다. 지금 서버 환경에 배치하고 템플릿을 백본보기에 삽입 할 때 jQuery의 .html() 함수 타이밍과 관련 있다고 생각되는 문제가 있습니다.

코드로에서

(중요한 부분)

가

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

mapView.js

01

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를 application.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 함수의 두 줄로 설명됩니다. #app가 render의 jQuery의 .html() 함수에 의해 삽입되는 동안 #appRoot는 index.html에 정적으로 정의됩니다. CreateMap()이 발생할 때까지 #map 요소가 삽입되지 않는 것 같습니다. 다시 말하지만, 이것은 localhost가 아닌 다른 컴퓨터에서 앱을 치는 경우에만 발생합니다.

감사 JP

Answer 1

this.$('#map').length을보십시오. 은 페이지를 추가하기 전에 렌더링을 호출하기 때문에 #map이 아직 페이지에 추가되어 있지 않으므로

$('#map').length이 작동하지 않습니다.

$("#appRoot").html(mapView.render().el); //보기를 렌더링 한 다음 페이지에 추가하십시오.

아래 코드는 문제를 해결하지만 this.$을 사용하면 더 좋습니다.

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