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

Question

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

为了实现这一点，我必须将 Controller 实例传递给每个组件，如下所示:

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

这样我就可以继续调用顶层的方法，但我不太喜欢像这样传递 Controller 实例。我还应该采取其他方法吗？

Answer 1

我认为这就是您正在寻找的:

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

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

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

编写自己的调度程序是很简单的。这是其他人与 Mithril 一起构建的示例:

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

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