1

我有 2 个组件 -addProjectForm和listProjects. 它们都是根模块内的嵌套组件。每当我使用表单添加项目时，我希望它立即出现在列表中。

为此，我必须将控制器实例传递给每个组件，如下所示：

var RootComponent = {};

rootComponent.controller = function() {
     this.example = 'test variable';
}

rootComponent.view = function(ctrl) {
     return [
           m.component(addProjectForm, ctrl),
           m.component(listProjects, ctrl)
     ];
}

然后listProjects例如组件，如下所示：

var listProjects = {
     controller: function(root) {
          this.root = root;
     },
     view: function(ctrl) {
          console.log(ctrl.root.example);
     }
};

所以这种方式我一直在顶层调用方法，但我不太喜欢像这样传递控制器实例。我还有其他方法吗？

4

2 回答 2

0

您遇到的问题是按引用传递或按值传递之间的区别。在 JS 中，所有原始类型都是按值传递的。这就是为什么你不能直接传递字符串，因为它是在传递过程中被克隆的。您在这里有多种选择：

您可以使用 m.prop 并将变量向下传递给组件， m.props 将值存储在始终通过引用传递的函数中。

var RootComponent = {};

rootComponent.controller = function() {
     this.example = m.prop('test variable');

}

rootComponent.view = function(ctrl) {
     return [
           m.component(addProjectForm, ctrl.example),
           m.component(listProjects, ctrl.example)
     ];
}

如果变量是一个数组，无论如何它都会通过引用传递。

第二个选项是将列表保留在根上下文中并向第二个组件添加回调。

var RootComponent = {};

rootComponent.controller = function() {
    var projects = this.projects = [];
    this.addProject = function(project) {
        projects.push(project);
    }

}

rootComponent.view = function(ctrl) {
    return [
        m.component(addProjectForm, {
            onsubmit: ctrl.addProject
        }),
        m.component(listProjects, ctrl.projects)
    ];
}
于 2015-11-19T11:39:01.190 回答
0

我想这就是你要找的：

Mithril.js：两个子组件是否应该通过其父控制器相互通信？

解决这个常见问题的新方法是使用 Facebook 开发的 Flux 类架构：

https://facebook.github.io/flux/

编写自己的调度程序是半琐碎的。这是其他人与 Mithril 一起构建的示例：

https://gist.github.com/MattMcFarland/25fb4f0241530d2f421a

这种方法的缺点是使用 m.withAttr 会有点反 Flux，因为视图不应该直接写入调度程序范式中的模型。

于 2015-10-29T22:45:38.007 回答