Question

我很困惑在复合材料组件中将孩子的生命周期的各个方面称为何处。我没有看到一个组件如何在其他组件中使用的方式，而其他组件又可以用于其他组件。不幸的是，Michael Bolins - “关闭权威指南”没有给出任何例子。我在Closure演示或互联网上都找不到任何这样的例子。

这是我的孩子组件：

goog.provide('MainToolbar');

goog.require('goog.ui.Button');
goog.require('goog.ui.Container');
goog.require('goog.ui.FlatButtonRenderer');

MainToolbar = function(){
    goog.ui.Container.call(this, goog.ui.Container.Orientation.HORIZONTAL);    
};
goog.inherits(MainToolbar, goog.ui.Container);

MainToolbar.prototype.createDom = function(){
    var this_ = this;
    // Pre-render the container, just to do something different.
    //hc.render(goog.dom.getElement('main-buttons'));
    goog.array.forEach(
        ['Happy', 'Sleepy', 'Doc', 'Bashful', 'Sneezy', 'Grumpy', 'Dopey'],
        function(item) {
            var c = new goog.ui.Button(item,
                goog.ui.FlatButtonRenderer.getInstance());          
            c.addClassName('goog-inline-block');
            c.setId(item);         
            this_.addChild(c, true);
        });
};

以下是我的称呼方式：

mainToolbar = new MainToolbar();
mainToolbar.render(goog.dom.getElement('main-buttons'));

问题是MainToolbar.prototype.createDom第二次调用自己，我得到了

Uncaught Error: The object already contains the key "Happy" from myApp

可能addChild应该放到其他地方，但到哪里去？构造函数？ enterDocument？它应该如何扩展？

更新：这是显示第二个电话的callstack：

MainToolbar.createDom (MainToolbar.js:70)
goog.ui.Component.addChildAt (component.js:1009)
goog.ui.Component.addChild (component.js:913)
(anonymous function) (MainToolbar.js:81)
goog.array.forEach.goog.NATIVE_ARRAY_PROTOTYPES.goog.array.ARRAY_PROTOTYPE_.forEach.l (array.js:179)
MainToolbar.createDom (MainToolbar.js:70)
goog.ui.Component.render_ (component.js:664)
goog.ui.Component.render (component.js:621)

Answer 1

goog.ui.Component的addChildAt方法（由goog.ui.Container继承）有一个检查，以确保在尝试渲染子控件时，还必须呈现父控件。它通过检查“this.element _”的存在来实现这一点：

（我的component.js副本中的第1023行）

if (!this.element_) {
  this.createDom();
}

这是重复的地方。覆盖createDom方法时，需要手动创建此属性：

this.element_ = goog.dom.createDom('div');

或者让继承的类完成工作：

goog.base(this, 'createDom');

通常在完成任何工作之前在方法的顶部。

带有孩子的组件的生命周期

1 个答案: