google-closure - 子を持つコンポーネントのライフサイクル

Question

複合コンポーネントで子供のライフサイクルのさまざまな側面をどこで呼び出すかについて混乱しています。残念ながら、Michael Bolins - 'Closure The Definitive Guide' には例がありません。Closure demos やインターネットでそのような例を見つけることもできません。

ここに子供を持つ私のコンポーネントがあります:

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 が自分自身を 2 回呼び出して、

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

おそらく addChild は別の場所に配置する必要がありますが、どこに配置するのでしょうか? コンストラクタ？ドキュメントを入力しますか? そして、どのようにスケーリングすることになっていますか？

更新: 2 番目の呼び出しを示すコールスタックは次のとおりです。

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)