Design patterns 闭包库组件+；闭包模板

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

问题是我有一些复杂的闭包组件，最好使用闭包模板（soy）创建它们的HTML。在某种程度上，我有一个小部件，里面有很多项，在下面几层有一个复选框，它应该是另一个闭包组件。但鉴于上述限制，我不能将复选框组件添加为小部件的直接子项

闭包组件可以像

div

DOM

元素一样简单：

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

---

复选框将是一个内部组件。但是，如果我使用闭包模板，我如何呈现整个HTML，然后将复选框设置为一个不同的组件？老实说，我不太熟悉soy模板，但我知道，如果第二个参数（opt_render）设置为false，您可以调用

goog.ui.component.addChild

，这将作为子组件添加组件，但不会尝试直接在内部渲染它。我过去曾用它在组件之间建立非直接的父子关系

例如：

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

---

如果在执行此操作时遇到问题，我现在就记不起来了，因此值得研究。

子组件必须是子组件，而不一定是DOM中的子组件，请参见方法的示例文档。因此，在这种情况下，可以调用addChild（child，false）

---

此外，您可以重写父组件的

getContentElement

方法，以返回应向其中添加子组件的元素，在这种情况下，如果需要，您可以使用addChild（child，true）而不是装饰。

谢谢您的回答。但我的问题是一个组件至少嵌套了两层。在这种情况下，您不能调用

addChild

。因此只需取出

main.addChild（sub，false）

。你不是已经有两个不同的组件了吗？抱歉耽搁了。这似乎将组件添加到了另一个组件之下。正如我在《闭包：权威指南》（MichaelBolin）中所读到的，我发现组件实现了goog.events.EventTarget，这意味着它们也应该与DOM相关，以保持人工事件和本机事件的一致性。执行

main.addChild（sub，false

将以DOM没有结构化的方式将这两个组件关联起来。这就是我的问题的原因。阅读关于decorateInternal的文章，是的，addChild（component，false）这正是我最终要做的。