Transition an Ember.js application from JavaScript

Question

How can I transition an Ember.js application from within a JavaScript function that is not part of a Route or Controller? Can I call something like route.transitionTo() or controller.transitionToRoute() using the Ember.Application instance directly?

What I'm trying to do is to integrate amMap in an Ember.js application such that when an area on the map is clicked, the application is transitioned to the appropriate state.

Here's an example jsFiddle. When a continent is selected from the list, the continent is selected on the map. I want the inverse to also happen, what should I do in the following listeners:

map.addListener("homeButtonClicked", function () {
    // how can I transition to index from here?
    // similar to this.transitionTo("index") from a route or
    // this.transitionToRoute("index") from a controller
    alert("Transition to index");
});
map.addListener("clickMapObject", function (e) {
    // how can I transition to continent from here?
    // similar to this.transitionTo("continent", id) from a route or
    // this.transitionToRoute("continent", id) from a controller
    alert("Transition to continent: " + e.mapObject.id);
});

Answer 1

ah, but why do it in a global function when you can have more fun doing it the "ember way" :)

You're better off moving the map div into a template and creating an "IndexView" and adding your event handlers for the map view in the didInsertElement() method. Here's a working emberjsbin: http://emberjs.jsbin.com/EsAkAVE/1/edit