2

我很困惑在哪里调用复合组件中儿童生命周期的各个方面。我看不到一个组件如何在另一个组件中使用，而另一个组件又可以在其他组件中使用。不幸的是，Michael Bolins - 'Closure The Definitive Guide' 没有给出任何示例。我也无法在 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 应该放在其他地方，但是放在哪里呢？构造函数？输入文档？它应该如何扩展？

更新：这是显示第二个调用的调用堆栈：

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

1 回答 1

2

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

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

于 2013-04-29T21:04:34.467 回答