1

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

这是一个代码示例

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 中的这段代码有什么问题呢？

谢谢，斯特凡

4

1 回答 1

1

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

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

对不起，斯特凡

于 2015-05-27T17:51:53.513 回答