Creating/Using EmberJS component

11

So let me try to explain the deleteAction and the authors on the controller. We are in the middle of switching to routable components. Therefore we still need to pass data like authors from the route to a controller. You do this with setupController. The default for Ember is content. If you need more models like authors you can use Ember.RSVP.hash to get them and wait for all promises to resolve. See:

Now we can move authors to the post controller.

https://github.com/broerse/ember-cli-blog/blob/master/app/controllers/post.js

Because controllers are singletons this is not repeated every time you switch form post to post.

Now 'actions`… If you call an Action on a controller and it is not handled there it will bubble to the route. If it is not handled by that route it will bubble up the three until it is handled. See:

  1. /templates/post.hbs deletePost action can come from a component.
  2. /controllers/post.js deletePost not found. => Bubble
  3. /routes/post.js deletePost not found. => Bubble
  4. /routes/posts.js deletePost found. => Action

Now you know Bubble forget it. Actions in components don’t bubble. This is done because to bubble path above confuses a lot of people and it not always directly clear what is happening. Now lets follow the deletePost from the component until it reaches the controller above.

  1. /components/blog-post-edit.hbs Fire deletePost
  2. /components/blog-post-edit.js bubble yourself to deleteAction defined by the next component “call”
  3. /components/blog-post.hbs your original deletePost action is now called deleteAction but it is the same action bubbling.
  4. /components/blog-post.js bubble yourself to deleteAction defined by the next component “call”
  5. /templates/post.hbs we are on the controller explained above and automatic bubbling starts from here.

So lets hope routable components land soon in Ember and skip the controller and the automatic bubbling.

I hope this helps you understand this.

1 Like