Ember.js中的Google Maps

Question

我已經成功設法在主頁上顯示了Google Maps。 我對其中一個內頁使用了相同的技術。

var MapView = Ember.View.extend({
    layoutName: 'pagelayout',
    didInsertElement : function(){
          var mapOptions = {
            center: new google.maps.LatLng(-34.397, 150.644),
            zoom: 8,
            mapTypeId: google.maps.MapTypeId.ROADMAP
            };
          var map = new google.maps.Map(this.$("#map").get(0),mapOptions);
          this.set('map',map); 
        },
        redrawMap : function(){
          var newLoc = new google.maps.LatLng(this.get('latitude'), this.get('longitude'));
          this.get('map').setCenter(newLoc)
        }.observes('latitude','longitude') 

}); 

但是，它不會渲染。 如果我這樣更改它，它可以工作，但會接管基本的html元素。

this.$().get(0) /**from this.$('#map').get(0)**/

我很沮喪。 考慮到問題可能是didInsertElement觸發得太早了（我了解到，此事件觸發時，此View的整個DOM都可用），所以我嘗試設置afterRender偵聽器並觸發了地圖加載但這也失敗了。 我已經三次檢查了div是否存在。

有人可以幫我嗎？

Answer 1

我從控制台運行了Google Maps初始化代碼，發現地圖確實已加載，因此didInsertElement如何與我的設置配合使用似乎是一個問題。 我的理解是，當View在DOM中時，didInsertElement被稱為什么，但是也許是因為我使用的是layouts，所以工作方式有所不同。

我通過在div本身內調用一個單獨的視圖來解決它

{{#view "map"}}

並為地圖創建一個新的視圖。

var MapView = Ember.View.extend({
 /**
 Same as before
**/
});

這只是我的解決方案，可能對面臨相同問題的其他人很有用。 如果有人有更好的解決方案，請添加它，以便我進行驗證和支持。

Answer 2

由於視圖可能尚未渲染，因此this。$（）可能不可用。 嘗試將其包裝在Ember.run.next調用中，以在下一個運行循環周期中延遲執行：

didInsertElement: function() {
    Ember.run.next(this, function() {
        // your code
    });
});