Passing value to component

Ember Data
1

hi, I need to pass a value to ember component from route template and print it through component template. If possible explain the working of a component in brief. Also let me know whether I can pass an entire model to component or not. If yes explain in brief Thanks in advance

2

I presume you don’t actually want a copy/paste of the ember guides but are just curious about data down?

Anyway a component, controller, route, EmberObject are all the same when it comes to data down. You can think of these as classes (or objects) in the classical Object Oriented Programming terms. The idea being that you are able to provide values to objects when you instantiate them (or set them to a value later).

Components are no different except typically you would provide values in the template instead of JS code. I will begin with a simple example. My component foo-bar will simply show a bold value:

<b>{{value}}</b>

This will be compiled into a component that will render a <div> with a <b> as a child and what ever value happens to be.1

If we then attempt to render that component in another template like this:

{{foo-bar value="test"}}

It will result in a DOM that looks like2:

<div><b>test</b></div>

If you notice we set the value to the hard coded String of "test". But this could have been a known property in the scope of the one calling the component. For example if the parent template looked like this:

{{foo-bar value=controllerValue}}

Then it would pass down whatever controllerValue is. In your case I presume you are interested in the model that you fetch from your route. In this case the route will set a property on the controller called model which you can then use to pass to a component from the template:

{{foo-bar value=model}}

To expand on this ide though the word model is not very descriptive and as your app grows it will become very difficult to keep track of things especially since model is everywhere and also part of the framework nomenclature.

To mange thing easier and make thing more readable I typically follow this structure in my apps:

Todo Items Route

import Route from '@ember/routing/route';

export default Route.extend({
  model() {
    return this.store.findAll('todo-item');
  }
});

Controller

import Controller from '@ember/controller';
import { reads } from '@ember/object/computed';

export default Controller.extend({
  todoItems: reads('model')
});

Controller Template

{{#each todoItems as |todoItem|}}
  {{todo-item item=todoItem}}
{{/each}}

Todo-Item Component Template

<b>{{item.description}}</b> &mdash; {{if item.completed "Done"}}

I hope this helps you understand the basic better.

Footnotes

  1. In future versions of Ember a template only component will no longer provide a wrapping <div>.
  2. Some class names not shown for brevity but Ember does add more then just the raw HTML when it renders a component.
2 Likes
3

Also this does not appear to be ember-data specific so the tag might be wrong.

1 Like
4

@sukima Thank you so much… Your answer helped me a lot… I will be keep in touch. As a beginner in ember, I may need all of your helps in future. Thanks once again

5

If you want more immediate assistance check out the ember discord server. The community is awesome there.

https://discordapp.com/invite/zT3asNS

1 Like
6

@sukima thanks for your helps and tips