Backbone：在应用程序级别视图中引用集合

Question

考虑下面列出的Backbone应用程序。当它开始时，它创建了一个餐馆集合和用户区域的当地餐馆的视图。用户稍后可以更改其搜索区域，然后通过提交搜索表单来更新整个集合。

问题：如果与search方法无关，如何与该视图无关？

目前，我正在设置餐馆集合和视图作为App视图本身的属性，以便可以从方法中轻松引用它，但这似乎是合适的，因为视图不仅仅是相关的到那个集合。

以我的方式引用该集合是否更好，或者更好地将其引用为App.collection，就像您在创建使用Backbone.View.extend({collection: mycollection})的集合中创建的视图时一样？

应用视图：

 var App = new (Backbone.View.extend({

      ...

      events: {
        submit: "search",
      },
      start: function(){
        App.render();
        App.restaurants = new App.Collections.Restaurants();
        App.restaurantsView = new App.Views.Restaurants({collection: App.restaurants});
        App.restaurants.fetch({});
      },
      search: function(e){
        e.preventDefault();
        var payload = $( App.targets.searchForm ).serializeObject();
        App.restaurants.fetch({data: payload, processData: true,});
      },

      ...

}):

Answer 1

这些都是一个大问题：如何构建Backbone应用程序，如何定义和维护模块边界，以及如何在需要时允许通知（如搜索和餐馆之间）来解耦模块？

大图回答：看看像Marionette这样的东西。它是一个建立在Backbone之上的框架，它可以很容易地遵循许多最佳实践，并为您做一些繁重的工作。 David Sulc有一个很棒的book关于木偶，它涵盖了所有这些主题和更多。强烈推荐。

立即问题答案：直接引用单个模块之外的对象（如搜索）是一个坏主意。它将应该保持分开的问题结合在一起。至少考虑添加一个应用程序级事件总线：搜索可以触发搜索事件，并且餐馆代码可以监听该事件并作为响应对其集合进行操作。您可以使用类似backbone.wreqr库的EventAggregator类，这是为这类事物量身定制的。在紧要关头，您可以使用Backbone.Events的实例来推送自己的实例：

App.vent = _.extend( {}, Backbone.Events );

从搜索代码中触发事件，如下所示：

App.vent.trigger('search', payload);

在您的start函数中，注册以侦听该事件：

App.vent.on('search', function(payload) {
    App.restaurants.fetch({data: payload, processData: true,});
});