如何组织跨页面通用的视图组？

Question

假设您有一组主干视图，它们在页面上组合以创建一个非常复杂的小部件，该小部件将出现在多个页面上。 （这方面的一个例子可能是一个表单，其中每个输入都是它自己的视图，并且可能具有它自己的复杂行为。）但是，由于 a/b 测试，每个页面上的小部件可能并不完全相同，其中一些内部视图可能不同……但在大部分页面中，它们都是相同的。

我们计划为每个页面设置一个主干控制器。我们希望减少因复制每个页面上的小部件所需的所有视图的实例而产生的复制/粘贴，但我们还希望能够灵活地将特定页面上的单个视图换成一个a/b 测试。

到目前为止，其中一个提议是创建实例化所有子视图（表单元素）的“元”视图（代表整个表单），如果您可以使用替代子视图构建元视图需要。但是，这会引入一种奇怪的视图层次结构，并且可能会在元视图中的视图之间存在一些耦合。

人们通常如何解决这个问题？

Answer 1

我很想知道您为什么认为您的提案会导致奇怪的视图层次结构。对我来说，它的各种子视图的元视图composed 的想法似乎很有意义。

对于视图的耦合，您可以通过确保通过共享模型和集合的更改所产生的事件或通过event aggregator 触发的事件来处理通信来缓解这种情况。

我肯定会看看Marionette，它是（直接来自文档）Backbone.js 的复合应用程序库，旨在简化大型 JavaScript 应用程序的构建。它包括一个事件聚合器以及一些用于创建复杂视图的漂亮结构。

您可能会发现 layout and region functionality 很有趣，因为我想您可以使用它来定义每个页面控制器的元视图的确切配置。