# Creating/Using EmberJS component

**URL:** <https://discuss.emberjs.com/t/creating-using-emberjs-component/8816>\
**Category:** Uncategorized\
**Created:** [September 21, 2015, 3:08pm UTC](https://discuss.emberjs.com/t/creating-using-emberjs-component/8816 "2015-09-21T15:08:16Z")\
**Posts on this page:** 1\
**Showing post:** 11

<div class="post-metadata">

**Author:** ![broerse](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/broerse/32/9497_2.png) [@broerse](https://discuss.emberjs.com/u/broerse)\
**Post date:** [October 1, 2015, 5:44am UTC](https://discuss.emberjs.com/t/creating-using-emberjs-component/8816/11 "2015-10-01T05:44:05Z")

</div>

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:

> <https://github.com/broerse/ember-cli-blog/blob/master/app/routes/posts.js>

Now we can move `authors` to the post controller.

[https://github.com/broerse/ember-cli-blog/blob/master/app/controllers/post.js](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](https://github.com/broerse/ember-cli-blog/blob/master/app/templates/post.hbs) `deletePost` action can come from a component.
2. [/controllers/post.js](https://github.com/broerse/ember-cli-blog/blob/master/app/controllers/post.js) `deletePost` not found. =\> Bubble
3. [/routes/post.js](https://github.com/broerse/ember-cli-blog/blob/master/app/routes/post.js) `deletePost` not found. =\> Bubble
4. [/routes/posts.js](https://github.com/broerse/ember-cli-blog/blob/master/app/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](https://github.com/broerse/ember-cli-blog/blob/master/app/templates/components/blog-post-edit.hbs) Fire `deletePost`
2. [/components/blog-post-edit.js](https://github.com/broerse/ember-cli-blog/blob/master/app/components/blog-post-edit.js) bubble yourself to `deleteAction` defined by the next component “call”
3. [/components/blog-post.hbs](https://github.com/broerse/ember-cli-blog/blob/master/app/templates/components/blog-post.hbs) your original `deletePost` action is now called `deleteAction` but it is the same action bubbling.
4. [/components/blog-post.js](https://github.com/broerse/ember-cli-blog/blob/master/app/components/blog-post.js) bubble yourself to `deleteAction` defined by the next component “call”
5. [/templates/post.hbs](https://github.com/broerse/ember-cli-blog/blob/master/app/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.

---

_[View the full topic](https://discuss.emberjs.com/t/creating-using-emberjs-component/8816)._