Ember + 谷歌地图标记点击

Question

我的 Ember 应用程序中有一系列 Google 地图标记，它们当前是在初始化程序中创建的，因为它们来自 JSON 提要，我只需要加载一次。

型号

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 容器以注入自定义对象等。

我会将这个初始化器中的代码移动到App.ApplicationRoute 的beforeModel 钩子中。 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。