Ember.js - bind events in the controller

Question

I've just started with Ember.js and the thing I still don't understand why events are bound inside the view, like this:

App.ClickableView = Ember.View.extend({
  click: function(evt) {
     alert("ClickableView was clicked!");
  }
});

In JavaScriptMVC and Sencha Touch things like this are handled in the controller. How can, for example, multiple controllers bind to the same event?

Answer 1

The default context for events has changed to the router (a controller) from the view in the latest versions of ember. The event will be handled by the current router (state), like this:

root : Ember.Route.extend({
    index : Ember.Route.extend({
        route : '/',
        connectOutlets : function(router) {
            var ac = router.get('applicationController');
            ac.connectOutlet({
                name : 'topnav',
                outletName : 'topnav'
            });
        },
        click: function(event, context) {
           alert("ClickableView was clicked!");
        }
})

If you had other click events in other states, the app would not be confused because it knows which state/route it is in.

You can handle your events in the view or controller, but it is recommended to handle them in the router.