CODEWITHSUNDEEP
ember.jsember-dataember-cli
sanjay rathod
sanjay rathod

Reputation: 77

How to send data from route to component?

I am beginner to ember.

I want to send data from route to component.

import Ember from 'ember';
var model = null;
export default Ember.Route.extend({
    model() {
        return true;
    }
});

i have defined this model in route now i want to use this model in component js file. i have just do console log but it gives undefined. my component js code is below

import Ember from 'ember';
export default Ember.Component.extend({
    didInsertElement() {
        console.log(model);
    }
});

So can anyone suggest what is the actual way to use data of route in component.

Upvotes: 3

Views: 3221

Answers (2)

feanor07
feanor07

Reputation: 3368

You need to pass the data to component from template; that is from route's template you need to pass whatever you want (i.e. model) to corresponding model. See the following twiddle for a simple demonstration.

In this example; index route returns a json object (an object with name & surname fields) from the model hook. What is returned from this model hook is passed to my-component inside index.hbs template file as object property. Then you can access the corresponding data within component's js and hbs files easily. In the example; data is shown within my-component.hbs template file. Hope it is clear.

Upvotes: 2

Ember Freak
Ember Freak

Reputation: 12872

You just return the data you need to pass it to template,

import Ember from 'ember';
export default Ember.Route.extend({
    model() {
        //here return model data which requires to display template
        return true;
    }
});

Inside template you can access is using model, in this case you just sent true so your model will contains true.

You need to pass this model to component so that you can access it from component. Inside template.hbs,

{{my-component model=model }}

You can access model property in component,

import Ember from 'ember';
export default Ember.Component.extend({
    didInsertElement() {
        console.log('Model ',this.get('model'));
    }
});

Welcome to Ember. I am strongly encouraging you to read ember guides and play with ember-twiddle

Upvotes: 6

Related Questions