How do actions in components get defined and triggered?


#1

Forgive me if this has been answered elsewhere or if I’m not finding it in the documentation, but how are actions defined in components now triggered?

In pre-component fashion I could just bind an action to any HTML element and then define it in a controller.

// hbs
<h3>Something awesome will happen when you click here</h3>
<div {{action "doSomething"}}>Do something when clicked</div>
// controller
...
actions: {
  doSomething (){
    //Something spectacular!
  }
}
...

I can’t seem to figure out how to do something similar with components.

Let’s say, I’ve extracted what was in the .hbs and put it into a component

// component hbs
<h3>Something awesome will happen when you click here</h3>
<div {{action "doSomething"}}>Do something when clicked</div>

And all I want to do is transition to a different route from where the current component is used. Where does the action need to be defined and/or what is the pattern to define actions? Let’s assume that the component is a child component of another component.


#2

I was able to figure it out. @emberigniter’s article on http://emberigniter.com/send-action-does-not-fire/ and the diagram under the section for routing in this article helped tremendously http://emberigniter.com/5-essential-ember-2.0-concepts/