Using this.sendAction() in components?

When you are using this.sendAction('actionName') you're bubbling up an action which you'll have to catch on the component/controller with actions

//controller/route/component.js
actions: {
  actionName: function() {
    //Do something
  }
}

If you want to send that up the chain, you'll have to call sendAction('') again on the component/controller and catch it again on the parent (and so on).

The other approach this.get('action')() uses closure actions, which are regular javascript functions. These are the preferred way to invoke actions in Ember 1.13.X as far as I know. One neat thing that closure actions have is that you can have return values. Meaning that you can have something like this:

//a controller
actions: {
  saveResult() {
    return this.get('model').save(); //notice the return (which returns a promise)
  }
}

//some template that uses the controller above
{{a-component save=(action 'saveResult')}} // Passes the saveResult action to the component

//a-component.js
actions: {
  someAction: function() {
     this.attrs.save().then(() => {
       //Do something with the return value
     });
  }
}

A lot can be written about closure actions, but others have written far better than I could, so I recommend the following articles:

  • Ember Closure Actions #1
  • Ember Closure Actions #2
  • Ember Closure Actions #3

And if you're new to the whole DDAU (Data Down Actions Up) concept, I really recommend Sam's article about the concept in general.

Update: There's also an addon (linked in the comments by @locks) which allows closure actions to bubble to routes.