backbone之module

上一篇列出了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干的事。