design-patternsarchitecturegoogle-closure-librarygoogle-closure-templates

Closure library component + Closure templates


When you add a Closure Component as a child of other component, they should be parent and son in the DOM also. This is actually a pretty useful constraint.

The thing is I have some complex Closure Components and it'd be preferrable to create their HTML using Closure Templates (soy). At some point I have a widget which has many items inside and there's a single checkbox a few levels down which should be another Closure Component. But given the above constraint, I can't add the checkbox component as a direct child of the widget.

A Closure Component can be as simple as div DOM element:

<div id='main-component'>
    <p>
        <input id='sub-component' type='checkbox' />
    </p>
</div>

The checkbox would be an inner component. But if I were using Closure Templates, how could i render the whole HTML and afterwards set the checkbox as a distinct component?


Solution

  • The child component has to be a descendant, not necessarily a child in the DOM, see for example documentation for method addChildAt. So it's ok to call addChild(child, false) in this case.

    Additionally, you can override getContentElement method of the parent component to return the element to which child components should be added, in this case you can if necessary use addChild(child, true) instead of decorating.