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");
    },
  }) 
});

Ashia

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.

Sieve

Actually, the default target of an action is the containing controller, and then the router. Here's an example jsbin showing that the controller handles the action when it is defined on both the controller and route: emberjs.jsbin.com/tupil/3/edit. And here are the ember docs about actions: emberjs.com/guides/templates/actions – Photodrama

From the docs: "By default, the {{action}} helper triggers a method on the template's controller" emberjs.com/guides/templates/actions/#toc_action-bubbling – Warfourd

@Photodrama You're right. Ember.js has changed a lot since 2012 and my answer is not correct anymore. Updated now. Thanks! – Cookery

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);
  };
});

Orlop

Also for bubbling for action handling, while the sequence says...current controller, then current route and then other active routes...does it mean that for parent, only the routes get a chance to handle (and not the controllers.i.e. parent controllers) ? – Succeed

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.

Regazzi

Thanks. This link is helpful! But, whats about the View? Why isnt the View the default target? jsfiddle.net/KvJ38/9 – Ashia