最近要用到backbone.js，网上也找了些资料，但是就看到一个开头还可以，往下看基本就看不下去了，幸好有这本书[LeanpubRead] Backbone.Marionette.js A Gentle Introduction，虽然英文版的，但是比较易懂，看起来倒不是很费劲，关键是知识点讲的很体系。
先贴几个案例的代码：collection(集合)，下面是所有代码都写在html中的，为了和后面的module进行比较
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title> Marionette Contact Manager</title>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <link href="../css/bootstrap.css" rel="stylesheet" >
8
9 <style type="text/css">
10 body{
11 margin-top: 60px;
12 }
13 </style>
14 <script src="../js/libs/jquery/jquery-1.11.1.min.js" type="text/javascript"></script>
15 <script src="../js/libs/underscore.js/underscore.js" type="text/javascript"></script>
16 <script src="../js/libs/backbone.js/backbone.js" type="text/javascript"></script>
17 <script src="../js/libs/backbone.marionette/backbone.marionette.js" type="text/javascript"></script>
18 <script src="../js/libs/json2/json2.js" type="text/javascript"></script>
19 </head>
20 <body>
21 <div id="main-region" class="container" >
22 <p> Here is static content in the web page. You‘ll notice that it gets
23 replaced by our app as soon as we start it. </p>
24 </div>
25 <script type="text/template" id="contact-list-item" >
26 <%= firstName %> <%= lastName %>
27 </script>
28 <script type="text/javascript" >
30 var ContactManager = new Marionette.Application();
31 ContactManager.addRegions({
32 mainRegion: "#main-region"
33 });
35 ContactManager.Contact = Backbone.Model.extend({});
36 ContactManager.ContactItemView = Marionette.ItemView.extend({
37 tagName: "li",
38 template: "#contact-list-item"
39 });
40 ContactManager.ContactsView = Marionette.CollectionView.extend({
41 tagName: "ul",
42 itemView: ContactManager.ContactItemView
43 });
44 ContactManager.ContactCollection = Backbone.Collection.extend({
45 model: ContactManager.Contact,
46 //sort
47 comparator: "firstName"
48 });
49
50 ContactManager.on("initialize:after", function () {
51 var contacts = new ContactManager.ContactCollection([
52 {
53 firstName: "Bob",
54 lastName: "Brigham",
55 phoneNumber: "555-0163"
56 },
57 {
58 firstName: "Alice",
59 lastName: "Arten",
60 phoneNumber: "555-0184"
61 },
62 {
63 firstName: "Charlie",
64 lastName: "Campbell",
65 phoneNumber: "555-0129"
66 }
67 ]);
68
69 var contactsListView = new ContactManager.ContactsView({
70 collection: contacts
71 });
72 ContactManager.mainRegion.show(contactsListView);
73 });
74
75 ContactManager.start();
76 </script>
77 <script type="text/javascript">
78
79 </script>
80 </body>
81 </html>
时间： 2024-10-11 11:27:26