Question

Is there a possibility to add custom action (basically any piece of JS code) to the routing event?

There is an application which needs to alter some part of the page “outside” of the app. Yes, that part of the page should be in the app, but it’s not. So, I need to change the “outside” DOM a little on some routing events. For example, when I’m at the index state, there is an empty element somewhere, when I move to another state, that element changes its content to “Back” and gets active. Also, I would like to bind the ember routing action to onClick event on that element.

I tried to find such thing but there seems to be nothing. I found this, but it does not solve my problem at all:
How do I bind events directly to existing HTML, without using any kind of views, in Ember.js?

Thanks for your time.

Answer 1

It might help to know there is an enter event you could handle inside a route:

other: Ember.Route.extend({
    route: '/other',
    connectOutlets: function(router, context) { /* ...? */ }),
    enter: function(router) {
        // ...
    }
})

Not sure if there’s a solution that better suits your needs.

Update: If you use the action helper, the click event will trigger the action, as you desire. Example — in the template: <a {{action gotoOtherState href="true"}}>Go to other state</a>, and in the route you were in (or an ancestor… the index route in this case): gotoOtherState: Ember.Route.transitionTo('path.to.otherState').

The href=true is an optional touch for <a> tags. You can also define your own transitions:

gotoOtherState: function(router, event) {
    // Setup? Teardown?
    // ...
    router.transitionTo('path.to.otherState');
}

Note: if you pass a context in your action helper (e.g. {{action gotoOtherState this}}), you can access it via event: router.transitionTo('path.to.otherState', event.context);

Update 2: enter is a private hook whereas activate is a new public hook (see http://emberjs.com/blog/2013/02/15/ember-1-0-rc/)