Question

我有点卡住寻找正确的方法来执行以下操作。我有一个包含两个子组件的父组件（请参阅下面的简化代码）。我想知道ChildA按下按钮时的正确方法，以便调用＆＃39; ChildB。他们应该通过父母沟通，但他们应该通过他们的控制器进行沟通吗？在这种情况下，父母必须将其控制器传递给孩子的控制者。

Parent = {
  view: function () {
    m.component(ChildA);
    m.component(ChildB);
  }
}

ChildA = {
  view: function () {
    m('button')
  }
}

ChildB = {
  view: function () {
  }
}

Answer 1

这实际上只是你喜欢的普通javascript风格的问题。想想JS对象之间的通信以及如何处理它。

通常情况下，秘银开发者选择父/子沟通和 Pub / Sub 。对于父/子，控制器通常是开发人员放置逻辑的地方。 m.component接受多个参数，您可以在其中将引用（数据/状态/逻辑）传递给子组件。 See the docs。没有必要将父控制器传递给子级。

但是，我更喜欢创建一个生活在任何一个组件之外的视图模型。这是我保持视图状态（即表单数据）和视图逻辑（即事件，UI相关回调和组件之间的共享状态）的地方。这样，当我不可避免地更改/添加组件时，我不必在每个组件中重写控制器逻辑。

Mithril的作者Leo Horie wrote an article解释了父母和一个孩子之间的交流，但这可以毫不费力地应用于多个孩子。

Pub / Sub是一种常见的JS习语。秘银维基列出了一些处理此问题的社区贡献。转到the wiki，打开标题为“所有主题”的页面，然后对“pub”执行常规页面搜索。你会发现那里的一些选择。根据应用程序的复杂程度，您的下一步行动可能是通过谷歌搜索Pub / Sub库。

Answer 2

我猜当你按下ChildA的按钮时，会更新一些模型状态吗？然后，如果两个孩子共享相同的模型，则每个事件后由Mithril完成的重绘将自动更新ChildB。

我的建议是将模型传递给子对象，让ChildA也成为按钮的控制器。为什么不是父母？父母通常应该处理适用于多个子视图（或其自身）的命令，并且按钮点击看起来很简单/耦合足以让ChildA管理它自己。但这当然取决于系统的真实复杂性。总是问题只是一个简单的例子，它并没有描述现实。：）

以下是我的意思：http://jsbin.com/sipahe/edit?js,output

（对不起Coffeescript，但它很简短并且很好地表达了意思。）

Mithril.js：两个子组件应该通过父母的控制器相互通信吗？

2 个答案: