闭包库组件 + 闭包模板答案

【问题标题】：Closure library component + Closure templates闭包库组件 + 闭包模板
【发布时间】：2013-10-07 19:30:26
【问题描述】：

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

问题是我有一些复杂的 Closure 组件，最好使用 Closure Templates (soy) 创建它们的 HTML。在某些时候，我有一个小部件，里面有很多项目，并且有一个复选框向下几级应该是另一个 Closure 组件。但鉴于上述约束，我无法将复选框组件添加为小部件的直接子级。

一个闭包组件可以像divDOM元素一样简单：

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

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

【问题讨论】：

了解 decorateInternal，是的，addChild(component, false)

标签： design-patterns architecture google-closure-library google-closure-templates

【解决方案1】：

子组件必须是后代，不一定是 DOM 中的子组件，请参阅方法 addChildAt 的示例文档。所以在这种情况下调用 addChild(child, false) 就可以了。

此外，您可以重写父组件的getContentElement 方法，返回应添加子组件的元素，在这种情况下，您可以根据需要使用 addChild(child, true) 来代替装饰。

【讨论】：

这正是我最终要做的。

【解决方案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);

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

【讨论】：

感谢您的回答。但我的询问是关于一个组件至少嵌套 2 层。在这种情况下你不能打电话给addChild。
所以只需取出main.addChild(sub, false)。你不是已经有 2 个不同的组件了吗？
抱歉耽搁了。这似乎在另一个下添加了组件。正如我在 Closure: The Definitive Guide (Michael Bolin) 中所读到的，我发现组件实现了 goog.events.EventTarget，这意味着它们也应该与 DOM 相关，以保持人工和原生事件的一致流动。执行main.addChild(sub, false 会以一种 DOM 未结构化的方式关联这两个组件。这就是我提出问题的原因。