Nested Components

The ability to reference components inside templates can be very useful. It enables the developer to correctly place the child component at the right position inside the parent in an intuitive way.

This can certainly be done with Metal.js components. For example, let's say we've already built a simple component called Button.

Now we're building a Modal component, and we want it to render some buttons inside the footer. In Modal's template file we could do the following:

When Modal is rendered, the buttons also will be, at the specified position. Besides this, Button components will be automatically instantiated for these elements.

Accessing sub component instances

But what if we need to access the created instances? That's possible by using ref. Let's add one to the previous example and see what happens:

Now you'll be able to access your sub components through your instance's refs property, like this: