嵌套组件 mithril.js

Question

我正在尝试将一些嵌套组件放在一起 assemble 一个更大的页面。使用临时步骤来创建视图似乎有点矫枉过正，但这只是将放在一起的更多组件的一部分。除此之外，它还很好地概述了正在发生的事情。但我做对了，没有错误。

这是一个代码示例

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

这里是一个 fiddle，其中的变体 var2 不起作用： http://jsfiddle.net/1f7uauav/

错误信息是：

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

要查看有效的 var1，请删除 fiddle（第 6、9、42 行）和注释行 45 和 46 中指示的注释。现在您可以看到所需的结果，但这样我可以'在其他组件中使用 MyApp。

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

谢谢，斯特凡

Answer 1

问题已解决，在 JavaScript 中永远不要让 return 后跟这样的换行符：

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

对不起，Stefan

嵌套组件 mithril.js

Nesting components with mithril.js

mithril.js