将 backbone 与多个视图和小模型一起使用

Question

我在我的大部分项目中使用 backbone，我想我确切地知道 M V C 的含义：M 代表数据抽象，V 代表表示，C 代表处理程序。

然而在我目前的项目中，我发现有很多视图相互交互，而很少有模式（与服务器的数据）。

例如，我有一个名为 V1 V2 V3 的复杂视图，当用户在 V1 中执行某些操作时，V2 应该做出相应的响应，V3 等也是如此，在最后一步，可能会发出请求从服务器请求数据。而且大部分请求都是用来获取数据而不是修改数据。

不喜欢常见的样式：一个（或多个）view for one model 比如CRUD操作。

现在我有两个想法：

1个虚拟模型

创建一个backbone 模型来表示整个应用程序的状态，将此模型绑定到所有视图。听起来像是将应用程序作为状态机。

虽然用不同的状态来描述应用程序并不容易。

2 使用事件调解器

使用事件中介register/un-register不同的事件，然后视图可以触发或响应不同的事件。

虽然如何定义事件避免不足或过多，总之要使事件正交并不容易。或者我还没有找到任何说明。

还有其他替代解决方案吗？

Answer 1

我认为这实际上是一个非常相关的问题。

Create a backbone model to represent the state of the whole application, bind this model to all the views. Sounds like make the application as a state machine.

如果模型不是对应于特定后端资源的一致表示，这似乎不是一个好主意。
理想情况下，视图是单个模型或集合的表示。当视图绑定到具有不相关属性的模型时，这似乎不太实用，无法在所有情况下进行管理，这也是由于不可预见的未来。

Use the event mediator to register/un-register different events, then the views can trigger or respond by different events.

我认为让视图响应自定义事件总体上不是一个好主意，但这对我来说是个人的。当应用程序变得越来越大时，将太多的责任分配给复杂的视图可能会变得一团糟；因此，我将把视图的任务限制为一般规则：

渲染模板；
激活插件（如果它们特定于视图）；
DOM事件绑定；
(模型绑定);
视图内部的方法（与DOM相关）；
在与视图交互后需要进一步操作时触发自定义事件以通知其他侦听器；

无论如何，根据我的经验，我发现使用自定义 presenter/controller 来实例化/更新自定义事件的视图是可行的，并且根本不用让视图本身担心这些事情.它使它们保持清洁，并且您始终知道在那里会找到什么。

您提到的视图 1、2 和 3 可以从演示者那里重新呈现。
主持人做了类似的事情：

"I get some data from a service and give it to some of my views that require them. If something changes, I'll let them know"

我通常每组相关视图有 1 个演示者。

我喜欢这种方法，因为：

它使相关视图的逻辑集中；
当一个事件被触发时，presenter 只需要为它控制的所有视图监听一次；
Presenters 被授予互相交谈的权力，我觉得这比所有视图都开始通过彼此交谈时更容易控制；

在简单的情况下，所有这些可能都无关紧要。但是当构建一个更大的应用程序时，我发现它会变得一团糟。

我的两毛钱

Answer 2

这是许多 Backbone 开发人员面临的问题。

我过去所做的是拥有一个 baseModel/baseCollection，并将它们视为一个抽象 class/interface，其他 models/collections 从中延伸，恭敬。这些基础对象将包含一个 listener/trigger 方法，然后我可以在我的应用程序中使用这些方法来更改一个 model/collection 能够分别启动 collections/models 的更新（从而触发视图更改）选择了。使用此方法允许我根据需要适当地拥有适当的对象 listen/broadcast 事件来编写我的应用程序。

我的一个朋友创建了一个服务器端 JS 状态机，它将启动超级模型（应用程序级模型反过来可以触发子视图 model/collection 更新）。

当然，Marionette 提供了一个框架，可以减少手动操作，让您可以重新编写应用程序代码。

Backbone.js 的乐趣和负担之一是您拥有您想要的所有灵活性。 :)

Answer 3

I have there complex view named V1 V2 V3, when user do something in the V1, V2 should respond accordingly, so does the V3 and etc

您似乎没有 3 个视图，但实际上 1 个视图包含 3 个相互关联的部分。我会使用一个呈现 3 个子视图的超级视图，并监听视图事件。例如：

Backbone.View.extend({
  initialize: function () {
    this.v1 = ...;
    this.v2 = ...;
    this.v3 = ...;

    this.v1.on('user do something', this.v2.respondAccordingly);
    this.v1.on('user do something', this.v3.soDoesEtc);
  }
})

在视图 1 中：

$('button').on('click', function () {
  self.trigger('user do something');
})

将 backbone 与多个视图和小模型一起使用

Using backbone with multiple views and little models

javascript

backbone.js