backbone学习时练习的简单示例
现在js MVC模式大行其道，像backbone,angularjs都是一个好的jsMVC框架。在学习backbone时，看了一下todo示例，写了一个简单的增删改查的示例，其中用到bootstrap做界面。练习一下！
列表页面
新增或修改页面
1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <title>Bootstrap 101 Template</title> 8 <link href="css/bootstrap.min.css" rel="stylesheet"> 9 <style type="text/css"> 10 body{padding:10px;} 11 </style> 12 </head> 13 <body> 14 <!-- Single button --> 15 <div class="page-header"> 16 <h1>Backbone <small>Study</small></h1> 17 </div> 18 <div id="page-body"> 19 20 </div> 21 <script type="text/html" id="divContactEdit"> 22 <div class="panel panel-default"> 23 <div class="panel-heading"> 24 <h3 class="panel-title">Contact List</h3> 25 </div> 26 <div class="panel-body"> 27 <form> 28 <div class="form-group"> 29 <label for="txtFirstName">FirstName</label> 30 <input type="text" class="form-control" value="<%=model.get("firstName")%>" id="txtFirstName" placeholder="FirstName"/> 31 <input type="hidden" value="<%=model.cid%>" id="hdIdentity" /> 32 </div> 33 <div class="form-group"> 34 <label for="txtLastName">LastName</label> 35 <input type="text" class="form-control" value="<%=model.get("lastName")%>" id="txtLastName" placeholder="LastName" /> 36 </div> 37 <div class="form-group"> 38 <label for="txtEmail">Email address</label> 39 <input type="email" class="form-control" value="<%=model.get("email")%>" id="txtEmail" placeholder="Email"> 40 </div> 41 <button type="button" class="btn btn-default" id="btnSubmit">Submit</button> 42 <button type="button" class="btn btn-default" id="btnBack">Back</button> 43 </form> 44 </div> 45 </div> 46 </script> 47 <script type="text/html" id="divContactList"> 48 <div class="panel panel-default"> 49 <div class="panel-heading"> 50 <h3 class="panel-title">Contact List</h3> 51 </div> 52 <div class="panel-body"> 53 <table class="table table table-hover"> 54 <tr> 55 <th>First Name</th> 56 <th>Last Name</th> 57 <th>Email</th> 58 <th>Oper</th> 59 </tr> 60 <% for(var i=0;i<contactList.models.length;i++){%> 61 <% if(contactList.models[i].get("firstName")!=undefined&&contactList.models[i].get("firstName")!=""){%> 62 <tr> 63 <td><%=contactList.models[i].get("firstName") %></td> 64 <td><%=contactList.models[i].get("lastName") %></td> 65 <td><%=contactList.models[i].get("email") %></td> 66 <td><a href="#post/<%=contactList.models[i].cid %>">Edit</a> 67 <a href="#del/<%=contactList.models[i].cid %>">Deleted</a> 68 </td> 69 </tr> 70 <%}%> 71 <% } %> 72 </table> 73 <div class="btn-group" role="group" aria-label="..." style="float:right"> 74 <button type="button" class="btn btn-default" id="btnAdd">Add</button> 75 </div> 76 </div> 77 </div> 78 </script> 79 <script src="js/jquery.js"></script> 80 <!--<script src="js/bootstrap.min.js"></script>--> 81 <script type="text/javascript" src="js/underscore.js"></script> 82 <script type="text/javascript" src="js/backbone.js"></script> 83 <script src="js/application.js" type="text/javascript"></script> 84 </body> 85 </html>
1 (function($){ 2 //创建Model类型 3 var Contact=Backbone.Model.extend({ 4 idAttribute: "_id", 5 initialize:function(){ 6 //绑定invalid方法 7 this.bind("invalid",function(model,error){ 8 alert(error); 9 }); 10 }, 11 //设置默认值 12 defaults:{ 13 firstName:"wu", 14 lastName:"ming", 15 email:"" 16 }, 17 //设置默认值，可以调用model.isValid()方法进行验证 18 validate: function(attrs, options) { 19 if (attrs.firstName == "") { 20 return "firstName不能为空！"; 21 } 22 if (attrs.lastName == "") { 23 return "lastName不能为空！"; 24 } 25 if (attrs.email == "") { 26 return "email不能为空！"; 27 }; 28 } 29 }); 30 //创建以ocntact的集合类型 31 var Contacts=Backbone.Collection.extend({ 32 model:Contact, 33 initialize:function(){ 34 35 } 36 }); 37 //页面列表视图 38 var ContactListView=Backbone.View.extend({ 39 el:"#page-body", 40 render:function(context){ 41 var template=_.template($("#divContactList").html()); 42 $(this.el).html(template(context)); 43 },events: { 44 'click #btnAdd': 'goToEdit' 45 },goToEdit:function(){ 46 app_router.navigate("add", {trigger:true,replace:true}); 47 } 48 }); 49 //编辑视图 50 var ContactEditView=Backbone.View.extend({ 51 el:"#page-body", 52 render:function(context){ 53 var template=_.template($("#divContactEdit").html()); 54 $(this.el).html(template(context)); 55 },events: { 56 'click #btnBack': 'backToIndex', 57 'click #btnSubmit': 'submit' 58 },backToIndex:function(){ 59 app_router.navigate("", {trigger:true,replace:true}); 60 },submit:function(){ 61 62 var firstName=$("#txtFirstName").val(); 63 var lastName=$("#txtLastName").val(); 64 var email=$("#txtEmail").val(); 65 66 var hdId=$("#hdIdentity").val(); 67 var model=new Contact(); 68 if(firstName=="")return; 69 model.set({firstName:firstName,lastName:lastName,email:email}); 70 //model.validate(); 71 //模型验证 72 if(model.isValid()){ 73 var model1=contactList.get(hdId); 74 //是否找到这个模型，存在则个性，否则新增 75 if(model1!=undefined){ 76 //修改模型 77 for(var i=0;i<contactList.models.length;i++){ 78 if(contactList.models[i].cid==hdId){ 79 contactList.models[i].set({firstName:model.get("firstName"),lastName:model.get("lastName"),email:model.get("email")}); 80 break; 81 } 82 } 83 }else{ 84 contactList.add(model); 85 } 86 //自动跳转到首页 87 app_router.navigate("", {trigger:true,replace:true}); 88 } 89 } 90 }); 91 //创建路由 92 var AppRouter=Backbone.Router.extend({ 93 routes:{ 94 "post/:id":"edit",//修改方法 95 "del/:id":"del",//删除路由 96 "add":"add",//添加路由 97 '': 'defaultRoute',//默认 98 "*actions":"defaultRoute" 99 }, 100 defaultRoute:function(actions){ 101 var listView=new ContactListView(); 102 103 listView.render(contactList); 104 }, 105 del:function(id){ 106 var model=this.getContact(id); 107 contactList.remove(model); 108 app_router.navigate("", {trigger:true,replace:true}); 109 }, 110 edit:function(id){ 111 //alert("edit"); 112 var model=this.getContact(id); 113 //alert(model); 114 var editView=new ContactEditView(); 115 editView.render({model:model}); 116 }, 117 add:function(actions){ 118 //alert(actions); 119 var model=new Contact(); 120 var editView=new ContactEditView(); 121 editView.render({model:model}); 122 }, 123 getContact: function(id) { 124 return contactList.get(id); 125 } 126 }); 127 /*程序开始时新增三个模型*/ 128 var contact1=new Contact(); 129 var contact2=new Contact(); 130 var contact3=new Contact(); 131 contact1.set({firstName:"xiao",lastName:"ming",email:"123@qq.com"}); 132 contact2.set({firstName:"xiao",lastName:"hua",email:"123@qq.com"}); 133 contact3.set({firstName:"xiao",lastName:"x",email:"123@qq.com"}); 134 //添加到Collection中 135 var contactList = new Contacts(); 136 contactList.add(contact1); 137 contactList.add(contact2); 138 contactList.add(contact3); 139 //赋值给全局变量以供调用 140 window.contactList=contactList; 141 //创建路由，全局启动 142 var app_router=new AppRouter; 143 window.app_router=app_router; 144 Backbone.history.start(); 145 146 })(jQuery);
附源码：
