灰烬+ 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 。