您的位置：首页 > 其它

backbone学习时练习的简单示例

2015-12-13 20:12 423 查看

现在js MVC模式大行其道，像backbone,angularjs都是一个好的jsMVC框架。在学习backbone时，看了一下todo示例，写了一个简单的增删改查的示例，其中用到bootstrap做界面。练习一下！

列表页面

新增或修改页面

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
body{padding:10px;}
</style>
</head>
<body>
<!-- Single button -->
<div class="page-header">
<h1>Backbone <small>Study</small></h1>
</div>
<div id="page-body">

</div>
<script type="text/html" id="divContactEdit">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Contact List</h3>
</div>
<div class="panel-body">
<form>
<div class="form-group">
<label for="txtFirstName">FirstName</label>
<input type="text" class="form-control" value="<%=model.get("firstName")%>" id="txtFirstName" placeholder="FirstName"/>
<input type="hidden" value="<%=model.cid%>" id="hdIdentity" />
</div>
<div class="form-group">
<label for="txtLastName">LastName</label>
<input type="text" class="form-control" value="<%=model.get("lastName")%>" id="txtLastName" placeholder="LastName" />
</div>
<div class="form-group">
<label for="txtEmail">Email address</label>
<input type="email" class="form-control" value="<%=model.get("email")%>" id="txtEmail" placeholder="Email">
</div>
<button type="button" class="btn btn-default" id="btnSubmit">Submit</button>
<button type="button" class="btn btn-default" id="btnBack">Back</button>
</form>
</div>
</div>
</script>
<script type="text/html" id="divContactList">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Contact List</h3>
</div>
<div class="panel-body">
<table class="table table table-hover">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Oper</th>
</tr>
<% for(var i=0;i<contactList.models.length;i++){%>
<% if(contactList.models[i].get("firstName")!=undefined&&contactList.models[i].get("firstName")!=""){%>
<tr>
<td><%=contactList.models[i].get("firstName") %></td>
<td><%=contactList.models[i].get("lastName") %></td>
<td><%=contactList.models[i].get("email") %></td>
<td><a href="#post/<%=contactList.models[i].cid %>">Edit</a>
<a href="#del/<%=contactList.models[i].cid %>">Deleted</a>
</td>
</tr>
<%}%>
<% } %>
</table>
<div class="btn-group" role="group" aria-label="..." style="float:right">
<button type="button" class="btn btn-default" id="btnAdd">Add</button>
</div>
</div>
</div>
</script>
<script src="js/jquery.js"></script>
<!--<script src="js/bootstrap.min.js"></script>-->
<script type="text/javascript" src="js/underscore.js"></script>
<script type="text/javascript" src="js/backbone.js"></script>
<script src="js/application.js" type="text/javascript"></script>
</body>
</html>

(function($){
//创建Model类型
var Contact=Backbone.Model.extend({
idAttribute: "_id",
initialize:function(){
//绑定invalid方法
this.bind("invalid",function(model,error){
alert(error);
});
},
//设置默认值
defaults:{
firstName:"wu",
lastName:"ming",
email:""
},
//设置默认值，可以调用model.isValid()方法进行验证
validate: function(attrs, options) {
if (attrs.firstName == "") {
return "firstName不能为空！";
}
if (attrs.lastName == "") {
return "lastName不能为空！";
}
if (attrs.email == "") {
return "email不能为空！";
};
}
});
//创建以ocntact的集合类型
var Contacts=Backbone.Collection.extend({
model:Contact,
initialize:function(){

}
});
//页面列表视图
var ContactListView=Backbone.View.extend({
el:"#page-body",
render:function(context){
var template=_.template($("#divContactList").html());
$(this.el).html(template(context));
},events: {
'click #btnAdd': 'goToEdit'
},goToEdit:function(){
app_router.navigate("add", {trigger:true,replace:true});
}
});
//编辑视图
var ContactEditView=Backbone.View.extend({
el:"#page-body",
render:function(context){
var template=_.template($("#divContactEdit").html());
$(this.el).html(template(context));
},events: {
'click #btnBack': 'backToIndex',
'click #btnSubmit': 'submit'
},backToIndex:function(){
app_router.navigate("", {trigger:true,replace:true});
},submit:function(){

var firstName=$("#txtFirstName").val();
var lastName=$("#txtLastName").val();
var email=$("#txtEmail").val();

var hdId=$("#hdIdentity").val();
var model=new Contact();
if(firstName=="")return;
model.set({firstName:firstName,lastName:lastName,email:email});
//model.validate();
//模型验证
if(model.isValid()){
var model1=contactList.get(hdId);
//是否找到这个模型，存在则个性，否则新增
if(model1!=undefined){
//修改模型
for(var i=0;i<contactList.models.length;i++){
if(contactList.models[i].cid==hdId){
contactList.models[i].set({firstName:model.get("firstName"),lastName:model.get("lastName"),email:model.get("email")});
break;
}
}
}else{
contactList.add(model);
}
//自动跳转到首页
app_router.navigate("", {trigger:true,replace:true});
}
}
});
//创建路由
var AppRouter=Backbone.Router.extend({
routes:{
"post/:id":"edit",//修改方法
"del/:id":"del",//删除路由
"add":"add",//添加路由
'': 'defaultRoute',//默认
"*actions":"defaultRoute"
},
defaultRoute:function(actions){
var listView=new ContactListView();

listView.render(contactList);
},
del:function(id){
var model=this.getContact(id);
contactList.remove(model);
app_router.navigate("", {trigger:true,replace:true});
},
edit:function(id){
//alert("edit");
var model=this.getContact(id);
//alert(model);
var editView=new ContactEditView();
editView.render({model:model});
},
add:function(actions){
//alert(actions);
var model=new Contact();
var editView=new ContactEditView();
editView.render({model:model});
},
getContact: function(id) {
return contactList.get(id);
}
});
/*程序开始时新增三个模型*/
var contact1=new Contact();
var contact2=new Contact();
var contact3=new Contact();
contact1.set({firstName:"xiao",lastName:"ming",email:"123@qq.com"});
contact2.set({firstName:"xiao",lastName:"hua",email:"123@qq.com"});
contact3.set({firstName:"xiao",lastName:"x",email:"123@qq.com"});
//添加到Collection中
var contactList = new Contacts();
contactList.add(contact1);
contactList.add(contact2);
contactList.add(contact3);
//赋值给全局变量以供调用
window.contactList=contactList;
//创建路由，全局启动
var app_router=new AppRouter;
window.app_router=app_router;
Backbone.history.start();

})(jQuery);

附源码：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航