Creating/Using EmberJS component


#1

What is needed to create an EmberJS component ? Do those use jQuery based plugins ? Also for usage, are they always used inside templates ?


#2

Seriously. This transition from controllers to components makes things damn confusing. When we create a component, it creates the templates/components/component-name.hbs as well as a components/component-name.js

When is the JS file used for the component? Is it called on an ACTION in the component? It doesn’t appear so… It seems like a controller is still necessary, or there is some secret magic that is required to make it not necessary. Do we use controllers or not?

A full component example, calling a RESTful service, using a model and actions, would be nice to see.


#3

I changed my example to use components:

I hope it explains it some more.


#4

Part of this confusion is because Components cannot completely replace Controllers, not until we have Routable Components.

Still use Controller (the base type, not ArrayController) and migrate when 2.1/2.2 hit.


#5

I do not see any answer as to how do I create a component using EmberJS and actually use it !


#6

Perhaps my example is not clear than. If you take a look at https://github.com/broerse/ember-cli-blog/tree/master/app/templates/components you see how blog-post.hbs shows the blog-post-edit component. Because there are no routable components yet you have to add the ‘blog-post’ components to your routes like this: https://github.com/broerse/ember-cli-blog/blob/master/app/templates/post.hbs If there are routable components they don’t need to be inside templates.

I don’t fully understand this question but some components use jQuery.

You can generate a component with ember g component my-component See also: http://www.programwitherik.com/ember-js-components-examples/

I hope this answers some of your questions.


#7

Yeah, I get that, sadly. The difficulty that I’m having is understanding when to put things in the controller versus the component-file.js that is generated along with the component-file.hbs.

How is that determined? In the example posted here, it seems like both are being used.


#8

I think in this transition period one should just look at a controller as a means to pass values to a component.

With that being said it’s not going to be a train-smash if you just continue using controllers for the time being and migrate later once routable components are available. Use components for code that you would like to reuse across many different routes, or code that you would just like to consolidate into an easy to use wrapper.


#9

So, I’ve been looking at your code. Lets see some of the things that really make it confusing for someone starting like me.

I’m trying to figure out this:
I have a component that is a form.
I’m submitting the form data to a function (in the component). That function needs to make a RESTful call to look up an entry and load my model.

So, I’m looking through your code for the same. It seems like the “post” object seems like a decent place to start.

Checking out your compoent for blog-post. The HBS is pretty straight forward. The JS, is well, confusing already.

And, nowhere in the code can I find a “saveAction” referenced, or a “deleteAction” anywhere. So, where do these go when they are clicked? Are they key words or something?

So, then, I’m trying to figure out how you’re using controllers. I check out your controller post.js.

Cool. Looks like a pretty straight forward pointer to where I can see these functions and how it gets the authors and their names, right? NOPE. I go and look into your controller posts.js

Uhm, what? Where is authors? You specifically wrote “controllers.posts.authors” which, to my thought, should mean a function in the controllers.posts to get the authors. What is this even referencing?

I can’t see how you are actually tying your model data into your component here, because the references don’t seem to follow what they say…

Any chance you can help me understand this?


#10

I will try to find some time to answer this tomorrow. I think I can help you understand this. For starters saveAction and deleteAction are here:


#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.


Sending action to child component in a component block Ember 1.13
Diving Deeper Into Ember
#12

This helped immensely. Thank you so much.


#13

No thanks.

Just a warning: the component actions I use now are almost the old 1.0 way. Closure Actions will be the way to go. I will move my example to Closure Actions when Ember-CLI uses Ember 2.0 by default.


#14

Are you reading my mind?

https://www.emberscreencasts.com/posts/78-closure-action-in-ember-20-components-return-values

I was just watching this…