Make Ember router transition to route from a click event

Question

I got a Leaflet map rendered as a view with controller in application template like {{view "map" locations }} . locations is an array of location models.

In index route the locations data is loaded and set on application controller to be passed on to the map view. This happens that way because other routes can set another content for locations and so change the markers on the map.

In the map view the Leaflet map is set up and the markers are created from locations . I want to be each marker to be clickable, so the app transitions to the route where the “clicked” location is described in detail. Therefor I have to bind a click event handler right after creation when I have the location model at hand like

mapMarker.on('click', function(ev) {
  // Do transition to 'location' with model location
});

I'd love to keep the routing stuff in the router / routes . In a template I'd use a link-to helper, but how to a transition from a click event defined within a view? I tried to use sendAction but it seems this doesn't work here because of the view being rendered in its on scope so the action doesn't bubble up to application route . Any ideas?

Answer 1

For the click event to bubble up to the routes you have to send it to the current controller.

this.get('controller').send('someEvent')

Doing just send() makes the action bubble up only to parent views.

Now, if you were to use the action helper in your template, in that case it goes directly to the controller. And if the controller doesn't implement the action, it will bubble up to the route.

See http://emberjs.com/guides/templates/actions/#toc_action-bubbling