使用 Backbone Marionette 从弹出模式添加到集合答案

【问题标题】：Adding to a collection from a popup modal with Backbone Marionette使用 Backbone Marionette 从弹出模式添加到集合
【发布时间】：2012-06-28 18:32:35
【问题描述】：

我对 Backbone 和 Marionette 还很陌生，很难让我的观点交流。

我有一个显示项目列表的复合视图。要将新项目添加到列表中，我有一个弹出模式，它在与复合视图分开的新项目视图中打开。

我不确定这是不是最好的方法，但在模式中，我创建了一个包含所有项目的集合的新实例，并将新项目添加到该集合中。这个新项目显示在原始复合视图中，但仅在我刷新页面之后。

我似乎无法弄清楚如何让复合视图侦听添加事件并在添加新模型后渲染它。

我在正确的轨道上吗？如果没有，我应该怎么做才能从模式中添加到集合中？

【问题讨论】：

标签： backbone.js marionette

【解决方案1】：

我想我已经弄清楚了。在创建模态视图时，我没有在模态视图中创建新集合，而是将组合视图中的集合作为参数传入。现在，当我在模式中添加新模型时，两个版本的集合都会自动触发“添加”事件，并且视图会自动呈现新模型。无需像我想的那样绑定任何额外的事件。

【讨论】：

【解决方案2】：

您的解决方案将有效，但意味着您的视图非常紧密耦合。您可能想考虑改用事件（请参阅How do I send a model that was clicked on within a ItemView to another ItemView that is on the same page?）

您的功能如何处理事件：

在模态框内，输入要创建的模型的数据
当您按下“保存”按钮时，
1. 您验证并保存模型var myNewModel = ...
2. 你触发了一个事件：MyApp.MySubApp.trigger("item:add", myNewModel)
在列表视图的控制器中，您侦听该事件，并将新模型添加到集合中。

控制器中的处理程序代码如下所示：

MyApp.MySubApp.on("item:add", function(model){
  this.myCollection.add(model);
});

如果您想了解有关使用事件的更多信息，请查看我编写的 2 个 Marionette 教程：

两者都使用事件在应用程序内传递信息。

另外，这里也说明了基本的事件：http://samples.leanpub.com/marionette-gentle-introduction-sample.pdf

【讨论】：