上一篇列出了collection的代码，下面要把代码进行分离
1 //先是app.js 2 var ContactManager = new Marionette.Application(); 3 4 ContactManager.addRegions({ 5 mainRegion: "#main-region" 6 }); 7 ContactManager.on("initialize:after", function () { 8 ContactManager.ContactsApp.List.Controller.listContacts(); 9 });
1 //再是list_view.js 2 ContactManager.module("ContactsApp.List", function (List, ContactManager, 3 Backbone, Marionette, $, _) { 4 List.Contact = Marionette.ItemView.extend({ 5 tagName: "li", 6 template: "#contact-list-item" 7 }); 8 List.Contacts = Marionette.CollectionView.extend({ 9 tagName: "ul", 10 itemView: List.Contact 11 }); 12 });
1 //接着是contact.js 2 ContactManager.module("Entities", function (Entities, ContactManager, 3 Backbone, Marionette, $, _) { 4 Entities.Contact = Backbone.Model.extend({}); 5 Entities.ContactCollection = Backbone.Collection.extend({ 6 model: Entities.Contact, 7 comparator: "firstname" 8 }); 9 var contacts; 10 var initializeContacts = function () { 11 contacts = new Entities.ContactCollection([ 12 { 13 id: 1, firstname: "Alice", lastname: "Arten", phoneNumber: "555-0184" 14 }, 15 { 16 id: 2, firstname: "Bob", lastname: "Brigham", phoneNumber: "555-0163" 17 }, 18 { 19 id: 3, firstname: "Charlie", lastname: "Campbell", phoneNumber: "555-0129" 20 } 21 ]); 22 }; 23 var API = { 24 getContactEntities: function () { 25 if (contacts === undefined) { 26 initializeContacts(); 27 } 28 return contacts; 29 } 30 }; 31 ContactManager.reqres.setHandler("contact:entities", function () { 32 return API.getContactEntities(); 33 }); 34 35 });
1 //最后list_controlller.js 2 ContactManager.module("ContactsApp.List", function (List, ContactManager, 3 Backbone, Marionette, $, _) { 4 List.Controller = { 5 listContacts: function () { 6 var contacts = ContactManager.request("contact:entities"); 7 var contactsListView = new List.Contacts({ 8 collection: contacts 9 }); 10 ContactManager.mainRegion.show(contactsListView); 11 } 12 }; 13 });
1 //当然还有index.html 2 <!DOCTYPE html> 3 <html> 4 <head> 5 <title> Marionette Contact Manager</title> 6 <meta charset="UTF-8"> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 <link href="../css/bootstrap.css" rel="stylesheet" > 9 10 <style type="text/css"> 11 body{ 12 margin-top: 60px; 13 } 14 </style> 15 16 </head> 17 <body> 18 <div class="navbar navbar-inverse navbar-fixed-top" > 19 <div class="navbar-inner" > 20 <div class="container" > 21 <span class="brand" style=" color: white"> Contact manager</span> 22 </div> 23 </div> 24 </div> 25 <div id="main-region" class="container" > 26 <p> Here is static content in the web page. You'll notice that it gets 27 replaced by our app as soon as we start it. </p> 28 </div> 29 <script type="text/template" id="contact-list-item" > 30 <%= firstname %> <%= lastname %> 31 </script> 32 <script src="../js/libs/jquery/jquery-1.11.1.min.js" type="text/javascript"></script> 33 <script src="../js/libs/underscore.js/underscore.js" type="text/javascript"></script> 34 <script src="../js/libs/backbone.js/backbone.js" type="text/javascript"></script> 35 <script src="../js/libs/backbone.marionette/backbone.marionette.js" type="text/javascript"></script> 36 <script src="../js/libs/json2/json2.js" type="text/javascript"></script> 37 <script src="../js/test/module4/app.js" type="text/javascript"></script> 38 <script src="../js/test/module4/contact.js" type="text/javascript"></script> 39 <script src="../js/test/module4/list_view.js" type="text/javascript"></script> 40 <script src="../js/test/module4/list_controlller.js" type="text/javascript"></script> 41 <script type="text/javascript" > 42 ContactManager.start(); 43 </script> 44 45 </body> 46 </html>
效果如图：
这就是module干的事。