Render nested component

[ramik91]

Hi,

I have this code example:

const MyComponentA = Ractive.extend({
    template: '<h1>Hello from my custom component A</h1>'
});

const MyComponentB = Ractive.extend({
    template: '<h1>Hello from my custom component B</h1>'
});

const InnerComponent = Ractive.extend({
    template: '<div class="custom">{{yield}}</div>'
});

const OuterComponent = Ractive.extend({
    components: {
        InnerComponent
    },
    template: '<div class="outer">{{>content}}</div>'
});

const app = new Ractive({
    components: {
        MyComponentA,
        MyComponentB,
        OuterComponent
    },
    el: document.body,
    template: `<div class="app">
        <OuterComponent>
                <InnerComponent>
                    <MyComponentA/>
                </InnerComponent>
                <InnerComponent>
                    <MyComponentB/>
                </InnerComponent>
        </OuterComponent>
    </div>`
});

I know that this code won't render MyComponentA neither MyComponentB as {{yield}} keyword actually sets the context to OuterComponent which doesn't know how to resolve them.

Is there a way to move {{yield}} context multiple levels up or am I just doing the whole thing terribly wrong?

Thanks!

[ceremcem]

What is the expected result here? Is that what you want: Playground

[ramik91]

@ceremcem Yeah exactly, but i wonder if its possible without using global components registry.

[ceremcem]

You mean "fallback mechanism" that a component will search for requested components in the current registry and then will start searching from one level up till global registry (Ractive.components) .

I'm not sure if that would be a desired behavior or it is suitable from the point of view of performance, but I find no objection right now. I'm sure @evs-chris would shed the light on the case.

[fskreuz]

The simplest answer would be to just use {{ yield }} on OuterComponent if you really want app to define what's possible on the template. I don't see why you'd need {{> content }} on it given this small example.

[ramik91]

@fskreuz that works just fine, but in that case InnerComponent has to be registered in app as well. Thats the way I use it in my project atm.

[dagnelies]

Hi,

I know I'm late but I thought I'd add my two cents. Basically, the example does not work because MyComponentA and MyComponentB are not declared at the right place. Since OuterComponent uses {{>content}}, it also has to know how to render that content. This is where the A B thingies have to be declared, like this:

const OuterComponent = Ractive.extend({
    components: {
        MyComponentA,
        MyComponentB,
        InnerComponent
    },
    template: '<div class="outer">{{>content}}</div>'
});

That's it.