Question

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

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

Answer 1

我认为这就是你要找的东西：

Mithril.js: Should two child components talk to each other through their parent's controller?

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

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

编写自己的调度程序非常简单。以下是其他人与秘银一起建造的例子：

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

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

Answer 2

您遇到的问题是通过引用或按值传递的差异。在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)
    ];
}

强制组件从Mithril.js中的不同组件重绘

2 个答案: