Creating/Using EmberJS component

harimath · September 21, 2015, 3:08pm

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

maiclein · September 21, 2015, 5:18pm

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.

broerse · September 21, 2015, 9:00pm

I changed my example to use components:

I hope it explains it some more.

elithrar · September 22, 2015, 12:45am

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.

harimath · September 22, 2015, 7:23am

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

broerse · September 22, 2015, 4:22pm

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: Ember Components Tutorial

I hope this answers some of your questions.

maiclein · September 24, 2015, 3:07pm

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.

uberclops · September 25, 2015, 7:03am

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.

maiclein · September 29, 2015, 4:54pm

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.

github.com

broerse/ember-cli-blog/blob/master/app/components/blog-post.js

import Component from '@glimmer/component';
import { inject as service } from '@ember/service';

export default class BlogPostComponent extends Component {
  @service currentUser;
}

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.

https://github.com/broerse/ember-cli-blog/blob/master/app/controllers/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

github.com

broerse/ember-cli-blog/blob/master/app/controllers/posts.js

import Controller from '@ember/controller';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';
import { inject as service } from '@ember/service';

class QueryParamsObj {
  @tracked page = 1;
  @tracked perPage = 5;
  @tracked query = '';
}

export default class PostsController extends Controller {
  @service currentUser;
  @service router;
  @service store;

  queryParams = [
    { 'queryParamsObj.page': 'page' },
    { 'queryParamsObj.perPage': 'perPage' },
    { 'queryParamsObj.query': 'query' },

This file has been truncated. show original

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?

broerse · September 29, 2015, 9:06pm

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:

https://github.com/broerse/ember-cli-blog/blob/master/app/templates/post.hbs

broerse · October 1, 2015, 5:44am

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:

github.com

broerse/ember-cli-blog/blob/master/app/routes/posts.js

import Route from '@ember/routing/route';
import { hash } from 'rsvp';
import { inject as service } from '@ember/service';

export default class PostsRoute extends Route {
  @service router;
  @service store;

  model() {
    var store = this.store;
    return hash({
      model: store.findAll('post'),
      authors: store.findAll('author'),
    });
  }

  setupController(controller, models) {
    controller.setProperties(models);
  }

This file has been truncated. show original

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:

/templates/post.hbs deletePost action can come from a component.
/controllers/post.js deletePost not found. => Bubble
/routes/post.js deletePost not found. => Bubble
/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.

/components/blog-post-edit.hbs Fire deletePost
/components/blog-post-edit.js bubble yourself to deleteAction defined by the next component “call”
/components/blog-post.hbs your original deletePost action is now called deleteAction but it is the same action bubbling.
/components/blog-post.js bubble yourself to deleteAction defined by the next component “call”
/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.

maiclein · October 2, 2015, 1:24pm

This helped immensely. Thank you so much.

broerse · October 2, 2015, 2:37pm

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.

maiclein · October 2, 2015, 2:38pm

Are you reading my mind?

I was just watching this…

Topic		Replies	Views
Why do I have to make controllers separately? Ember CLI	4	553	May 5, 2020
Diving Deeper Into Ember	10	3773	October 9, 2015
Question from a new guy Routing	4	649	April 27, 2019
Best practice: when to use components, partials or templates Design	7	11472	November 27, 2017
Can Reactjs be used as a View within Emberjs? Proposals	27	41238	August 26, 2017

Creating/Using EmberJS component

Related Topics