2014-07-21 47 views
0

我正在開發一個應用程序在木偶,但該主題也指原始的Backbone。保持引用全局集合的最佳模式Backbone

在我的應用程序中,我有很多集合。其中,有3個重要的應用程序(例如用戶數據,比如大多數視圖中顯示的名稱)。主要問題是:在Backbone/Marionette中繼續引用集合的最佳方式是什麼?我想出了以下幾個想法:

  • 我應該將它們附加爲Application對象的屬性嗎?如果是這樣的話,我必須將參考Application對象傳遞給所有視圖,然後將視圖傳遞給它們的子視圖,子視圖的子視圖等等。但是這似乎是一種蹩腳和醜陋的設計。相反,我可以單獨傳遞每個集合,但這似乎更糟糕的解決方案,因爲我無法預測哪個(子)視圖將需要集合。按順序保持這些嵌套的引用將比傳遞Application對象困難得多,我總是可以傳遞一次。
  • 也可以將Application作爲單例導入。我使用requireJS,大多數模塊現在返回構造函數(視圖,模型和集合的構造函數)。現在應用程序模塊返回應用程序構造函數,但相反,它可以返回應用程序對象。然後,如果一個視圖需要顯示集合中的一些數據,它可能只需要應用程序模塊,這就是全部。
  • 最後,基於前面的觀點,我認爲我可以創建一個簡單的集合地圖,並像之前一樣將其設置爲單例。這只是爲了禁止所有視圖訪問Application對象,這仍然是一種不好的模式。

請提出你認爲是最好的(以上評論也是受歡迎的)。我只需要一個好的設計模式。據我所知,木偶文件在這裏沒有提供任何建議。

回答

1

我遵循David Sulc的書Backbone.Marionette.js: A Gentle Introduction中提出的建議。 (也是下一本書涉及如何去處理同一個項目,需要https://leanpub.com/structuring-backbone-with-requirejs-and-marionette)他使用的代碼示例可以在github上找到,所以你可以看看最後一個例子,以瞭解他在沒有的情況下做了什麼; t想買這本書,但我真的推薦它,因爲它真的幫助我如何構建我的項目。

要開始我已經安裝了實體模塊。文件的結構也遵循這個我有一個實體文件夾,它有單獨的實體。

每個實體文件涉及該特定實體的所有操作和結構。我喜歡這種方法,因爲當我想編輯實體strcuture或從服務器獲取數據的方法時,我只需要到一個地方進行此更改。

與實體的交互是通過marionettes req/res系統處理的。通過這種方式,您可以將處理程序暴露給應用程序的其餘部分,但只要能夠回收所需的響應,他們就不需要關心該請求的處理方式。

下面是我的一個實體的示例,用於展示我的意思 - 我的應用程序需要一個在各個階段中稱爲位置的集合,所以這是在應用程序的早期加載的事情,然後是整個生命週期。

//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; 
}); 

現在在我的應用程序使用此這裏是怎麼回事,現在可以使用

​​

不知道如果我已經做了很大的工作,解釋這樣的例子,但如果你正在尋找關於牽線木偶的好設計的一些想法請看這本書,因爲它解釋得比我剛剛做得好很多

相關問題