上一篇列出了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干的事。
时间： 2024-11-06 22:39:23