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

对不起，Stefan

使用mithril.js嵌套组件

1 个答案: