Closure library component + Closure templates

Question

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?

Answer 1

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.

Answer 2

To be honest I am not terribly familiar with soy templates, but I do know that you can call goog.ui.Component.addChild with the second argument (opt_render) set to false, which will add the component as a child but not try to render it directly inside. I've used this in the past to have non-direct parent-child relationships between components.

Example :

var main = new goog.ui.Component();
main.decorate(goog.dom.getElement('main-component'));
var sub = new goog.ui.Component();
sub.decorate(goog.dom.getElement('sub-component'));
main.addChild(sub, false);

If I encountered problems doing this, I can't remember them now, so it'd be worthwhile to look into.