Ember - bind custom actions along a route

Question

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

There is an application that should change part of the page "outside" the application. Yes, this part of the page should be in the application, but it is not. So, I need to slightly change the "external" DOM ​​to some routing events. For example, when I am in the index state, somewhere there is an empty element, when I switch to another state, this element changes its content to “Back” and becomes active. Also, I would like to bind the ember routing action to the onClick event for this element.

I tried to find such a thing, but it seems nothing. I found this, but that does not solve my problem: How to link events directly to existing HTML without using any views in Ember.js?

Thank you for your time.

Answer 1

This can help to find out that there is an enter event that you could handle inside the route:

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

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

Update: If you use the action helper, the click event will trigger the action as you wish. An example is in the template: <a {{action gotoOtherState href="true"}}>Go to other state</a> and on the route that you were in (or in the ancestor ... the gotoOtherState: Ember.Route.transitionTo('path.to.otherState') route in this case): gotoOtherState: Ember.Route.transitionTo('path.to.otherState') .

href=true is an optional touch for the <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 (for example, {{action gotoOtherState this}} ), you can access it through an event: router.transitionTo('path.to.otherState', event.context);

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