backbone之collection

最近要用到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>

 

posted on 2015-04-07 18:17  到处都要注册  阅读(249)  评论(0)  编辑  收藏  举报

导航