闭包库组件+闭包模板

Question

当您将闭包组件添加为其他组件的子组件时，它们也应该是DOM中的父组件和子组件。这实际上是一个非常有用的约束。

问题是，我有一些复杂的闭包组件，最好使用闭包模板(大豆)创建它们的HTML。在某种程度上，我有一个小部件，其中包含许多项，并且有一个复选框，向下几个级别，这应该是另一个闭包组件。但是，鉴于上述约束，我不能将复选框组件添加为小部件的直接子组件。

闭包组件可以像div DOM元素一样简单：

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

复选框将是一个内部组件。但是，如果我使用闭包模板，如何呈现整个HTML，然后将复选框设置为一个独立的组件？

Answer 1

子组件必须是子类，而不一定是DOM中的子组件，例如，请参阅方法addChildAt的文档。因此，在这种情况下调用addChild(子，false)是可以的。

此外，您可以重写父组件的getContentElement方法来返回应该添加子组件的元素，在这种情况下，您可以在必要时使用addChild(子组件，true)而不是装饰。

Answer 2

老实说，我对大豆模板并不十分熟悉，但我知道您可以调用goog.ui.Component.addChild，将第二个参数(opt_render)设置为false，这将将组件作为子元素添加，但不尝试将其直接呈现在内部。在过去，我曾使用这个方法在组件之间建立非直接的父子关系。

例子：

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);

如果我在做这件事时遇到了问题，我现在就记不起来了，所以值得研究一下。