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