Ember.js Router Action to Controller

Question

When I use the Ember Router, how can I define actions in the template who are connected to the controller?

An Example is here: http://jsfiddle.net/KvJ38/3/

Unter My Profile are two actions: One is defined on the State, and is working Two is defined on the Controller. How can i make this working or should I use another approach?

App.Router = Em.Router.extend({
  enableLogging: true,
  location: 'hash',

  root: Em.State.extend({
    // EVENTS
    goHome: Ember.State.transitionTo('home'),
    viewProfile: Ember.State.transitionTo('profile'),

    // STATES
    home: Em.State.extend({
      route: '/',
      connectOutlets: function(router, context) {
        var appController = router.get('applicationController');
        appController.connectOutlet(App.HomeView);
      }
     }),

    // STATES
    profile: Em.State.extend({
      route: '/profile',
        connectOutlets: function(router, context) {
          var appController = router.get('applicationController');
          appController.connectOutlet(App.ProfileView);
        }
    }),

    one: function() {
      alert("eins");
    },
  }) 
});

Answer 1

The default target of an action is the router, but you can define another one in the template:

{{action two target="controller"}}

And add a "two" function in "App.ProfileController".

UPDATE

This answer was hopefully correct mid 2012. Now (September 2014), the documentation says:

By default, the {{action}} helper triggers a method on the template's controller. [...] If the controller does not implement a method with the same name as the action in its actions object, the action will be sent to the router, where the currently active leaf route will be given a chance to handle the action. [...] If neither the template's controller nor the currently active route implements a handler, the action will continue to bubble to any parent routes. Ultimately, if an ApplicationRoute is defined, it will have an opportunity to handle the action. When an action is triggered, but no matching action handler is implemented on the controller, the current route, or any of the current route's ancestors, an error will be thrown.

Answer 2

You can specify the target attribute explicitly, as noted by @Stéphane, in order to send the action elsewhere.

If unspecified, the target of an action helper is the controller.target. As you noted, this is usually set to the router.

If you have a template where you want the default target be different, you can make that happen by setting the target property of the controller. For example, to set the target to the controller itself:

App.MyController = Ember.Controller.extend({
  init: function(){
    this._super();
    this.set('target', this);
  };
});

Answer 3

The controller should not be "directly" in charge of action event. The state/route is.

I believe https://github.com/emberjs/ember.js/issues/1015 will help you.