[英]Ember + Google Map Marker Click
I have a series of Google Map Markers in my Ember App which are created currently in an initializer as they are from a JSON feed and I only ever need to load them once. 我的Ember应用程序中有一系列Google Map Markers,它们当前是在初始化程序中创建的,因为它们来自JSON feed,而我只需要加载一次即可。
Model 模型
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')
});
Initializer 初始化
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)
})
}
});
The next thing I would like to do is on a marker click route to service.show, currently i've been unable to figure out a way to call a route from anything other that a controller or view. 我想做的下一件事是在指向service.show的标记单击路由上,当前我一直无法找到一种从控制器或视图之外的任何东西调用路由的方法。 Does anyone have an idea or an alternative way of doing this?
有没有人有一个想法或替代的方式来做到这一点?
I'm assuming that your initializer runs inside a model
hook on a route. 我假设您的初始化程序在路由的
model
挂钩中运行。 So you have access to the same functions within any callbacks created within it. 因此,您可以在其中创建的任何回调中访问相同的功能。 You can use
transitionTo
inside this closure to do this routing. 您可以在此闭包内部使用
transitionTo
进行此路由。
var route = this;
google.maps.event.addListener(marker, 'click', function() {
route.transitionTo('service', mapService);
});
You are doing $.getJSON inside Application initializer. 您正在应用程序初始化程序中执行$ .getJSON。 This is asynchronous and isn't what the initializer is for.
这是异步的,不是初始化程序的用途。 The initializer is for prepping Ember internals, like the IOC container to inject custom objects, etc.
初始化程序用于准备Ember内部,例如IOC容器以注入自定义对象等。
I would move the code inside this initializer into the beforeModel
hook of App.ApplicationRoute
. 我想这里面的初始化代码移动到
beforeModel
的钩App.ApplicationRoute
。 The beforeModel
hook is the ideal place for such initialization. beforeModel
挂钩是进行此类初始化的理想位置。 This hook can return a promise
so, you need to directly return the result of $.getJSON
and the router will automatically pause to finish loading. 这个钩子可以返回一个
promise
因此,您需要直接返回$.getJSON
的结果,路由器将自动暂停以完成加载。
For the preloader display, use the LoadingRoute
. 对于预加载器显示,请使用
LoadingRoute
。
App.LoadingRoute = Ember.Route.extend({});
with a template called loading
, with your markup. 带有一个名为
loading
的模板,并带有您的标记。 Ember will take care of showing/hiding of this template when loading models. 加载模型时,Ember将负责显示/隐藏此模板。
<script type="text/x-handlebars" data-template-name="loading">
<h1>Loading</h1>
</script>
This will allow you to use route.transitionTo
as above. 这将允许您如上所述使用
route.transitionTo
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.