1

我的 Ember 应用程序中有一系列谷歌地图标记，它们当前是在初始化程序中创建的，因为它们来自 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 的标记单击路由上，目前我无法找到一种方法来从除控制器或视图之外的任何东西调用路由。有没有人有这样做的想法或替代方法？

4

1 回答 1

1

我假设您的初始化程序在model路由的钩子内运行。因此，您可以在其中创建的任何回调中访问相同的函数。您可以transitionTo在此闭包内部使用来执行此路由。

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

编辑：发布澄清

您正在应用程序初始化程序中执行 $.getJSON 。这是异步的，不是初始化程序的用途。初始化器用于准备 Ember 内部，例如 IOC 容器以注入自定义对象等。

我会将此初始化程序中的代码移动beforeModel到App.ApplicationRoute. 钩子是进行这种初始化的beforeModel理想场所。这个钩子可以返回一个promiseso，你需要直接返回结果，$.getJSON路由器会自动暂停完成加载。

对于预加载器显示，使用LoadingRoute.

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

使用名为 的模板loading，使用您的标记。Ember 将在加载模型时处理此模板的显示/隐藏。

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

这将允许您route.transitionTo按上述方式使用。

于 2013-07-25T12:26:34.567 回答