Explain action name in a template

1

I wonder what is the difference between the following actions definitions:

  1. When defined as <a {{action 'login'}}>Login</a>
  2. When defined as {{#link-to ‘index’ }}Home{{/link-to}}

Is is correct to say that when using with {{#link-to 'index' }} helper, I should always define a route with the same name as the String passed in to link_to helper ?

  1. Should actions be always declared in controllers only ?
  2. What does the below declaration (onLogin) mean (in app/components/main-navigation.js):
actions: {
    login() {
      // Closure actions are not yet available in Ember 1.12
      // eslint-disable-next-line ember/closure-actions
      this.sendAction('onLogin');
    },
  1. What does the onLogin='transitionToLoginRoute declaration mean (in app/templates/application.hbs):
{{main-navigation onLogin='transitionToLoginRoute'}}

There is no action onLogin defined anywhere. Is there any convention to explain this ? Thank you.

2
  1. No you can use ember-route-action-helper but be aware that the routable components RFC is closed by Yehuda. So controllers seem to be here to stay.

See route-action here:

https://github.com/broerse/ember-cli-blog/blob/master/app/templates/posts.hbs

3
  1. What this code is doing is making a link <a> tag in the dom but then NOT assigning an href to it, and instead defining an action. Since the action name isn’t specified it is the “default” action which for a link/button would be onClick. So this is mapping “onClick” on the <a> element to the ‘login’ action on that controller
  2. This isn’t an action per-se, it’s a helper which generates a link element (<a>) that behaves like any regular old HTML link.
  3. No, actions can be declared on controllers or routes (if they are bubbled or you use an addon like @broerse mentioned). They can also be used in components, but sending an action “out of a component” is different, as we’ll see in 4/5…
  4. so the component has an action called “login”. In the handler for the “login” action, which is what you posted, it calls “sendAction”. The sendAction method is kinda like saying “hey, i’m a component, and I want to take send the given action (in this case “onLogin”) outside of myself out to my owner”. Which brings us to #5…
  5. When you invoke a component you can pass properties OR actions to it. There are a number of ways to pass actions, either as named actions (like the example you posted) or closure actions. What that code does is invoke a main-navigation component, and pass the string '‘transitionToLoginRoute’ as the “onLogin” property. This is how you pass a named action (forget if that’s actually the correct term). Anyway, when the component calls this.sendAction('onLogin'); it will do a lookup on itself, and if the component owner passed in something for ‘onLogin’ it will call the action on the owners controller, in this case ‘transitionToLoginRoute’.

For more info on all of this I would highly recommend reading the docs on components and actions

1 Like