主干:在应用级别视图中引用集合

Backbone: Referencing collections in the app level view

本文关键字：视图 引用 集合 应用 主干      更新时间：2023-09-26

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

问题：如果集合与视图无关，如何在 search 方法中引用集合？

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

像我一样引用集合更好，还是最好将其引用为 App.collection ，就像 backbone 在创建具有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,});
      },
      ...
   
}):

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

大局答案：看看木偶之类的东西。它是一个建立在 Backbone 之上的框架，它可以轻松遵循许多最佳实践，并为您完成一些繁重的工作。大卫·苏尔克（David Sulc）有一本关于木偶的好书，涵盖了所有这些主题等等。强烈推荐。

直接

问题答案：直接引用单个模块（如搜索）之外的对象是一个坏主意。它将应该分开的关切结合在一起。至少，考虑添加应用程序级事件总线：搜索可以触发搜索事件，餐厅代码可以侦听该事件并对其集合执行响应。你可以使用类似 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,});
});
相关文章：