1

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?

András Gyömrey
  • 1,770
  • 1
  • 15
  • 36

2 Answers2

2

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.

Ivan
  • 36
  • 1
  • 3
1

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.

ne8il
  • 2,427
  • 1
  • 20
  • 18
  • Thank you for your answer. But my inquiry is about a component being nested 2 levels deep at least. In that case you can't call ```addChild```. – András Gyömrey Oct 08 '13 at 14:32
  • So just take out the `main.addChild(sub, false)`. Don't you already have 2 distinct components? – Yunchi Oct 13 '13 at 04:49
  • Sorry the delay. That seems to add the component under the other. As I read in Closure: The Definitive Guide (Michael Bolin), I found components implement goog.events.EventTarget, which means they should be DOM related also to keep artifitial and native events flowing consistently. Doing ```main.addChild(sub, false``` would relate the two components in a way the DOM is not structured. This is the reason of my question. – András Gyömrey Oct 14 '13 at 20:52