用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行中的注释。现在您可以看到所需的结果，但是这样我就不能在其他组件中使用MyApp。

那么，var2中的代码有什么问题呢？

谢谢，斯特凡

Answer 1

问题解决了，在JavaScript中，永远不要让返回后面出现像这样的断行符：

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

抱歉，斯特凡