解耦主干视图，其中一个触发器在其他视图中发生更改

Question

我有一个包含两个Backbone Views的页面。联系人列表 ContactsListView 的视图以及用于导航 NavView 的视图。 ContactsListView具有联系人模型集合。我的联系人集合列表非常大，所以我不想在页面加载时显示所有这些。

所以我实现了联系人集合，只从服务器获取范围（最初为0到50）的联系人，并且ContactsListView显示它。并使用NavView显示联系人范围ContactsListView正在显示当前。它还有下一个和上一个按钮，点击哪个ContactsListView应显示下一个或上一个联系人范围。

这里我的NavView实际上是控制 ContactsListView应该显示的联系范围。但我想从NavView中分离ContactsListView。

我意识到我可以通过创建范围模型（使用from和to属性，默认设置为0和50）并将其传递给ContactsListView和NavView来实现。当ContactsListView添加一个侦听器 ContactsListView.show（from，to） 时，更改Range模型上的事件，NavView在单击下一个或上一个按钮时更新Range模型。随着Range模型的更改，ContactsListView侦听器将获取联系人以更新其视图。

或者

我可以创建一个Range模型并将其传递给NavView。然后，NavView会在单击prev或next按钮时更新范围，并在（NavView）本身上触发带有范围值的事件 rangeUpdated 。我在一些额外的代码片段（可能是我自己的控制器对象）中添加侦听器在NavView 上，并调用ContactsListView.show（从，到）显式。

哪一个更好的方法来解耦ContactsListView和NavView？或者还有其他方法来解耦它们吗？

Answer 1

使用Range模型初始化两个视图。 在“联系人列表”视图中，侦听“范围模型更改事件”以从“联系人”集合中请求新数据并显示 单击导航视图时，只需使用新值设置范围模型（它将触发更改事件，并且将更新您的联系人列表视图）。

Answer 2

只要你的问题用backbone.marionette标记，我就假设你正在使用它，或者考虑使用它。

一个选项可能是使用marionette.compositeview，您可以在同一视图中定义模型和集合，因此您无需在视图之间共享模型

但也许，如果你真的想要解开两个观点，那么就不是最好的方法。为了解耦它们，使用您自己的控制器（或marionette.controller）的第二个选项是我更喜欢的选项，因为您不需要将范围编号作为ContactListView中模型中包含的显式数据（您已经在NavView中获取该信息。

最后，我喜欢从Controller中获取获取/保存数据，而不是从视图中。 MVC模式中的View只显示事物，从模型中获取信息。从服务器检索将存储在模型中的数据似乎更像是控制器操作。我不知道你是如何将数据与视图绑定的，但也许理想的是从Controller中获取数据，并让视图在检测到模型更改时自行呈现。