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);
});

编辑：后澄清

你在Application初始化程序中执行$ .getJSON。这是异步的，不是初始化程序的用途。初始化程序用于准备Ember内部，就像注入自定义对象的IOC容器一样。

我会将此初始化程序中的代码移动到beforeModel的{{1}}挂钩中。 App.ApplicationRoute挂钩是进行此类初始化的理想位置。此挂钩可以返回beforeModel，因此，您需要直接返回promise的结果，路由器将自动暂停以完成加载。

对于预加载器显示，请使用$.getJSON。

LoadingRoute

使用名为App.LoadingRoute = Ember.Route.extend({});的模板，带有您的标记。在加载模型时，Ember将负责显示/隐藏此模板。

loading

这样您就可以使用上面的<script type="text/x-handlebars" data-template-name="loading"> <h1>Loading</h1> </script>。

Ember + Google Map Marker Click

1 个答案:

编辑：后澄清