mithril.js - mithril.js を使用したコンポーネントのネスト

Question

ネストされたコンポーネントをいくつかまとめて、より大きなページを組み立てようとしています。ビューを作成するための暫定的な手順を使用するのはやり過ぎのように思えますが、これは、まとめられる多くのコンポーネントの一部にすぎません。それに加えて、何が起こっているのかをよく概観できます。しかし、エラーなしでは正しく理解できません。

これがコード例です

var MyApp = {
    controller: function() {
        return {loaded: true}
    },
    view: function(ctrl) {
        return //[  // remove comment for var1
            m("button[type=button]", {onclick: function() {ctrl.loaded = false}})
            , ctrl.loaded ? MyComponent : ""
            //]    // remove comment for var1
    }
}

var MyComponent = {
    controller: function() {
        return {
            onunload: function() {
                console.log("unloaded!")
            }
        }
    },
    view: function() {
        return m("h1", "My component")
    }
}

var MainCompCtrl = function() {
    var ctrl = this
    ctrl.name = "test";
}


var MainCompView = function(ctrl, args) {

    var partComp = m.component(MyApp);
    var part_myComp = m(".row", [ m(".col-md-2", [partComp] ) ]); 

    var part5 = m("[id='2']", {class : 'commandContainer'}, "2", [part_myComp]); 
    return part5;
};

// var1 working
//m.mount(document.body, MyApp)

// var2 not working
m.mount(document.body, m.component(
        {controller : MainCompCtrl, view : MainCompView}));

これは、機能しないバリアント var2 のフィドルです: http://jsfiddle.net/1f7uauav/

エラーメッセージは次のとおりです。

TypeError: data is undefined
if (data.subtree === "retain") return cached;

動作中の var1 を確認するには、フィドル (6、9、42 行目) に示されているようにコメントを削除し、45 行目と 46 行目をコメントしてください。

では、var2 のこのコードの何が問題になっているのでしょうか?

ありがとう、ステファン