javascript - 在 Backbone 中保留对全局集合的引用的最佳模式

Question

我正在 Marionette 中开发一个应用程序，但该主题也涉及原始 Backbone。

在我的应用程序中，我有很多集合。其中，有 3 个重要的数据在整个应用程序中都使用(例如，用户数据，例如名称，显示在大多数 View 中)。主要问题是:在 Backbone/Marionette 中保留对集合的引用的最佳方法(遵循的良好模式)是什么？我想出了以下一些想法:

• 我应该将它们附加为 Application 对象的属性吗？如果是这样，我必须将对 Application 对象的引用传递给所有 View ，然后将 View 传递给它们的 subview ， subview 传递给子 subview ，等等。但这似乎是一个蹩脚且丑陋的设计。
• 相反，我可以单独传递每个集合，但这似乎是更糟糕的解决方案，因为我无法预测哪个(子) View 将需要集合。保持这些嵌套引用的顺序比传递 Application 对象要困难得多，我总是可以传递一次。
• 还可以将Application作为单例导入。我正在使用 requireJS，大多数模块现在都返回构造函数( View 、模型和集合的构造函数)。现在应用程序模块返回 Application 构造函数，但它可以返回 Application 对象。然后，如果 View 需要显示集合中的一些数据，它可能只需要应用程序模块，仅此而已。
• 最后，基于上一点，我认为我可以创建一个简单的集合映射，并使其像以前一样成为单例。这只是禁止所有 View 访问 Application 对象，这似乎仍然是一个不好的模式。

请提出您认为最好的建议(也欢迎对上述观点发表评论)。我这里只需要一个好的设计模式。据我所知，Marionette 文档在这里没有提出任何建议。

Answer 1

我遵循 David Sulc 的书中提出的建议 Backbone.Marionette.js: A Gentle Introduction 。 (下一本书也会介绍如何使用 require https://leanpub.com/structuring-backbone-with-requirejs-and-marionette 构建同一个项目)他使用的代码示例可以在 github 上找到，因此您可以查看最后的示例，以了解如果您没有这样做，他会做什么;不想买这本书，但我真的推荐它，因为它确实帮助我构建了我的项目。

首先，我设置了一个实体模块。文件的结构也遵循此我有一个包含单独实体的实体文件夹。

每个实体文件都涉及该特定实体的所有操作和结构。我喜欢这种方法，因为当我想编辑实体结构或从服务器获取数据的方法时，我只需要去一个地方即可进行此更改。

与实体的交互是通过 Marionette 请求/资源系统处理的。通过这种方式，您可以向应用程序的其余部分公开处理程序，但它们不需要关心如何处理该请求，只要它返回所需的响应即可。

这是我的一个实体的示例，用于展示我的意思 - 我的应用程序需要一个称为各个阶段位置的集合，因此这是在应用程序早期加载的内容，然后在整个生命周期中都可用。

 //i am using require so i define my app to use
 define(["app", ], function(MyApp) {
     //All of this will be added to the Entities module so if i want direct access 
     //i can go Myapp.Entities.whateverEntityIhaveDeclared
     MyApp.module("Entities", function(Entities, MyApp, Backbone, Marionette, $, _) {

         //model (nothing new here)          
         Entities.Position = Backbone.Model.extend({
             urlRoot: "api/positions",

             defaults: {
                 name: "",
             }
         });
         //collection again nothing new here
         Entities.PositionCollection = Backbone.Collection.extend({
             url: "api/positions",
             model: Entities.Position,
             comparator: "name"
         });

         //an init function to attach a position collection onto Entities module so it can be available throughout my app
         var initializePositions = function() {
             if (Entities.positions === undefined) {
                 Entities.positions = new Entities.PositionCollection();
             }
         };

         //
         var API = {

             //returns a jquery deferred promise so that this request can easily be handled async
             loadPositionEntitiesRemote: function() {
                 //init positions make's sure i have the collectoin avaliable if it
                 //has not yet been defined
                 initializePositions();


                 //setup defer object
                 var defer = $.Deferred();
                 //I actually use a custom sever object here when dealing 
                 //with ajax requests
                 //but because my app always go through this API i can 
                 //easily swap out  how the collection is retrieved.
                 // Here is an example using backbones fetch
                 Entities.positions.fetch({
                     success: function() {
                         defer.resolve();
                     },
                     error: function(data) {
                         defer.reject(data);
                     }
                 });

                 //setup promise to return
                 var promise = defer.promise();
                 return promise;
             },


             //get the positions collection from here i could 
             //directly access the attributes or add to the collection
             refrencePositionEntities: function() {
                 initializePositions();

                 return Entities.positions;
             },

             //get a position from the collection based on id
             //
             getPositionEntity: function(positionId) {
                 initializePositions();

                 return Entities.positions.get(positionId);
             }
         };


         //setup handlers for the app to use
         MyApp.reqres.setHandler("position:entities:remote", function() {
             return API.loadPositionEntitiesRemote();
         });

         MyApp.reqres.setHandler("position:entities:refrence", function() {

             return API.refrencePositionEntities();
         });

         MyApp.reqres.setHandler("position:entity", function(id) {
             return API.getPositionEntity(id);
         });

         MyApp.reqres.setHandler("position:entity:new", function(position) {
             return new Entities.Position(position);
         });
     });

     return;
 });

现在要在我的应用程序中使用它，这是现在如何使用它的示例

 someFunction: function(){


    //so early in the app i will get the positions
    var positionPromise = MyApp.request("position:entities:remote");
    $.when(positionPromise).done(function() {
                     //do what ever as data has been loaded
                 }).fail(function(data){
                  //something failed so handle here might through up an error page but up to you
                 }).always(function(){
                  //something to always do no matter if fail or sucess
                 });

 }

 anotherFunction: function(){


 //later in the app in another controller i might to get the collection
 // I could also get it through MyApp.Entities.positions but i rather use the
 // API set up so if i ever decided i want to add so checks or something in
 // when retrieving the collection its super easy

 var positionsCollection = MyApp.request("position:entities:refrence");



 }

不确定我是否已经很好地解释了这一点，但如果您正在寻找有关 Marionette 良好设计的想法，请查看这本书，因为它比我刚刚所做的解释得更好