现在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:"[email protected]"});
132 contact2.set({firstName:"xiao",lastName:"hua",email:"[email protected]"});
133 contact3.set({firstName:"xiao",lastName:"x",email:"[email protected]"});
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);
附源码：
时间： 2024-11-05 04:57:54