CODEWITHSUNDEEP
ember.jsember-cli
CookieEater
CookieEater

Reputation: 2496

Ember Pass property created inside parent component to child components

In my Ember app, I have a property that I create inside the init() method of a parent component. I want to pass this into children.

// app/component/parent.js
import Ember from 'ember';
import ParentProperty from 'somewhere';

export default Ember.Component.extend({
    init() {
        this._super(...arguments);
        let model = this.get('model');
        let moreData = this.get('moreData');
        this.parentProperty = new ParentProperty(model, moreData);
    }

    click(e) {
        this.get('moreData').doSomthing();
    }
});

// app/component/application.hbs
{{#parent model=model moreData=moreData}}
    // Here, I want to pass the `parentProperty` created 
    // in the init of the parent component.
    {{child parentProperty=parent.parentProperty}}
{{/parent}}

I know I can use the {{with}} helper to create a ParentProperty, wrap the parent and child, and pass it down to both of them, but that's not what I want to do. Is this possible?

Upvotes: 0

Views: 1339

Answers (1)

CookieEater
CookieEater

Reputation: 2496

As @Lux suggested, I could achieve this using the yield helper.

// app/component/parent.js
import Ember from 'ember';
import ParentProperty from 'somewhere';

export default Ember.Component.extend({
    init() {
        this._super(...arguments);
        let model = this.get('model');
        let moreData = this.get('moreData');
        this.parentProperty = new ParentProperty(model, moreData);
    }

    click(e) {
        this.get('moreData').doSomthing();
    }
});

// app/component/parent.hbs
{{yield parentProperty}}

// app/component/application.hbs
{{#parent model=model moreData=moreData as |parentProperty|}}
    {{child parentProperty=parentProperty}}
{{/parent}}

Upvotes: 1

Related Questions