灰燼+ Google Map Marker請點擊

Question

我的Ember應用程序中有一系列Google Map Markers，它們當前是在初始化程序中創建的，因為它們來自JSON feed，而我只需要加載一次即可。

模型

App.Service = DS.Model.extend({
     title: DS.attr('string'),
     description: DS.attr('string'),
     type: DS.attr('string'),
     lat: DS.attr('string'),
     lng: DS.attr('string'),
     marker: DS.attr('object')
});

初始化

Ember.Application.initializer({
  name: "preloadServices", 
  initialize: function(container, application) {

    $.getJSON('../services.page',function(data){
      var services = data.services

        $.each(services,function(index,service){

         if(null != service.lat && null != service.lng){    
             var marker = new google.maps.Marker({
                position: new google.maps.LatLng(service.lat,service.lng),
                map: App.googleMap,
                title: service.title,
                icon: 'http://www.google.com/intl/en_us/mapfiles/ms/micons/green-dot.png'
             });

             var mapService = App.Service.createRecord({
                id: service.id,
                name: service.title,
                type: service.type,
                description: service.description,
                lat: service.lat,
                lng: service.lng,
                marker: marker
            });
         }

        google.maps.event.addListener(marker, 'click', function() {
            //Redirect to service?
            mapService.markerClick();
        });

       });

    App.preloadFinished = true;
    $('#loader-bg').fadeOut(600)
   })

  }
});

我想做的下一件事是在指向service.show的標記單擊路由上，當前我一直無法找到一種從控制器或視圖之外的任何東西調用路由的方法。 有沒有人有一個想法或替代的方式來做到這一點？

Answer 1

我假設您的初始化程序在路由的model掛鈎中運行。 因此，您可以在其中創建的任何回調中訪問相同的功能。 您可以在此閉包內部使用transitionTo進行此路由。

var route = this;
google.maps.event.addListener(marker, 'click', function() {
  route.transitionTo('service', mapService);
});

編輯：澄清

您正在應用程序初始化程序中執行$ .getJSON。 這是異步的，不是初始化程序的用途。 初始化程序用於准備Ember內部，例如IOC容器以注入自定義對象等。

我想這里面的初始化代碼移動到beforeModel的鈎App.ApplicationRoute 。 beforeModel掛鈎是進行此類初始化的理想位置。 這個鈎子可以返回一個promise因此，您需要直接返回$.getJSON的結果，路由器將自動暫停以完成加載。

對於預加載器顯示，請使用LoadingRoute 。

App.LoadingRoute = Ember.Route.extend({});

帶有一個名為loading的模板，並帶有您的標記。 加載模型時，Ember將負責顯示/隱藏此模板。

<script type="text/x-handlebars" data-template-name="loading">
  <h1>Loading</h1>
</script>

這將允許您如上所述使用route.transitionTo 。