How to associate events directly with existing HTML, without using any kinds, in Ember.js?

Question

Ember.js has an excellent mechanism for attaching data to views, setting up event processing with firing in the view or using the Router. But I need to be able to handle events triggered in already generated HTML code (PHP, server side). Let me show you a simple example. I have this code:

<a id="login" href="#">Login</a>

I need to be able to route / process a click on this link so that it gets into my Ember app. I have been looking for ways to do this, but cannot find.

How can i do this?

Answer 1

If this link is inside the DOM element, which is a child of the Ember managed element, you can use the action helper:

 <a id="login" href="#" {{action doSomeStuff}}>Login</a> 

This doSomeStuff event will be dispatched to your Ember.Router , which the handler should implement on the assigned route:

 ...: Ember.Route.extend({ doSomeStuff: function (router) { //... } }), 

If the link is outside the scope of the application, you can register handlers for application-related elements using jQuery:

 $('a#login').click(function () { App.router.transitionTo('the.route.path'); }); 

App.router is entered into the initialization of the Ember application, you can access it from anywhere.

But let me say that switching from an external router is not recommended.

Last but not least, you can also pass context to the transitionTo call.