Nested components and passing data

1 
I have a few templates/components.. like this:
display.hbs
  {{my-component data=someData}}

so, my-component has in it
<div>foo</div>
{{some-other-component myData=data.blah}}

(or anything at all)

In the SomeOtherComponent.js file… myData is always undefined, no matter what I do with it/set etc

Is this common/well known and I shouldn’t bother nesting components?

1 Like
2

Nesting components is both expected and encouraged. You can pass information through from parent to child. If you’re having issues you should try using the log helper, {{log data}}, to log out data in my-component to make sure it’s actually available and has a value in your context. Things like {{log this}} should also help when debugging your current context.

3

Should work, here’s a sample JSBin: http://emberjs.jsbin.com/kodeq/5/edit

4

Sorry, that JSBin appears empty

5

Indeed the bin is empty. Could someone else please show an example of how to do this? I tried doing this.set(‘foo’, foo) in the parent component but foo is undefined in its template, so it’s not being passed to the child component. (It is defined in the parent.)

UPDATE: I hadn’t remembered to include foo as an object member. However, it remains null in the template.

var ParentComponent = Ember.Component.extend({
    foo: null,
    foobar: function() {
        this.set('foo', 'foo!');
    },
    didInsertElement: function() {
        this.foobar();
    }
});
export default ParentComponent;

{{! templates/components/parent.hbs foo is null }}

{{log foo}}
{{child foo=foo}}

UPDATE II: That should have been willInsertElement.

But I’ve found the answer I was looking for: on(‘init’)

var SomeComponent = Ember.Component.extend({
    foo: null,
    foobar: function() {
        this.set('foo', 'foo!');
    }.on('init')
});

{{log foo}} {{! 'foo!'}}

Roger, I hope that helps you too.

6

I just posted this topic List Component with nested "outlet" component for selected item that includes and example of passing data to nested components. direct link to the jsbin on that post