Question

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

问题是我有一些复杂的 Closure Components ，并且最好使用 Closure Templates （soy）来创建HTML。在某些时候，我有一个小部件，里面有很多项目，并且有一个单独的复选框，下面应该是另一个 Closure Component 。但鉴于上述约束，我无法将复选框组件添加为窗口小部件的直接子项。

Closure Component可以像div DOM元素一样简单：

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

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

Answer 1

子组件必须是后代，不一定是DOM中的子项，请参阅方法addChildAt的文档。所以在这种情况下可以调用addChild（child，false）。

此外，您可以覆盖父组件的getContentElement方法以返回应添加子组件的元素，在这种情况下，您可以根据需要使用addChild（child，true）而不是装饰。

Answer 2

说实话，我对大豆模板并不十分熟悉，但我知道你可以在第二个参数（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);

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

Closure库组件+ Closure模板

2 个答案: