我遵循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;
});
現在在我的應用程序使用此這裏是怎麼回事,現在可以使用
不知道如果我已經做了很大的工作,解釋這樣的例子,但如果你正在尋找關於牽線木偶的好設計的一些想法請看這本書,因爲它解釋得比我剛剛做得好很多