backbone测试代码
2016-04-26 21:06
411 查看
一、入门测试
二、backbone继承
三、自定义事件以及触发
四、传给服务器值和从服务器获取值
五、Backbone路由和历史管理
六、事件委托
七、前端模板
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
<script src="js/underscore-min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/backbone-min.js" type="text/javascript" charset="utf-8"></script>
<script>
//一、创建对象
//var model=new Backbone.Model();
//var models=new Backbone.Collection();
//var view=new Backbone.View();
//二、调用model中set和get方法
//var model=new Backbone.Model();
//model.set('title','lili');
//var aa=model.get('title');
//alert(aa);
//三、调用collection中add方法
var model01=new Backbone.Model({'name':'lili'});
var model02=new Backbone.Model({'name':'haha'});
var models=new Backbone.Collection();
models.add(model01);
models.add(model02);
alert(JSON.stringify(models));
</script>
</head>
<body>
</body>
</html>二、backbone继承
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
<script src="js/underscore-min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/backbone-min.js" type="text/javascript" charset="utf-8"></script>
<script>
//一、扩展一个实例化方法和一个构造方法，其中extend第一个参数是实例化方法，第二个方法是构造方法
//var M=Backbone.Model.extend({
// aa:function (){
// alert(123);
// }
//},{
// bb:function (){
// alert(456);
// }
//});
//
//var AA=new M(); //调用实例化方法必须先实例化出来
//AA.aa();
//M.bb();
//二、扩展一个方法并用model中参数调用
//var M=Backbone.Model.extend({
// defaults:{ //注意此处是json格式
// 'name':'lili'
// }
//});
//二次继承
var M=Backbone.Model.extend({
aa:function(){alert(123)}
});
var AA=M.extend(); //调用实例化方法必须先实例化出来
var test=new AA();
test.aa();
</script>
</head>
<body>
</body>
</html>三、自定义事件以及触发
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
<script src="js/underscore-min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/backbone-min.js" type="text/javascript" charset="utf-8"></script>
<script>
//一、触发自定义事件
//var M=Backbone.Model.extend({
// defaults:{'name':'lili'},
// initialize:{ //初始化构造函数
// this.on('change',function(){
// alert("默认参数被改变");
// })
// }
//})
//var m=new M();
//m.set('name','haha');
//二、触发自定义事件中固定属性
//var M=Backbone.Model.extend({
// defaults:{'name':'lili'},
// initialize:function(){
// this.on('change:name',function(model){
// alert("默认参数被改变");
// console.log(model)
// })
// }
//})
//var m=new M();
//m.set('name','haha');
//三、view和MVC模式
$(function(){
var M=Backbone.Model.extend({
defaults:{'name':'lili'},
});
var V=Backbone.View.extend({
initialize: function() {
this.listenTo(this.model, "change", this.render);
},
render: function() {
alert("默认参数被改变");
}
});
var m=new M();
var v=new V({model:m});
m.set('name','hahah')
})
</script>
</head>
<body>
</body>
</html>四、传给服务器值和从服务器获取值
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
<script src="js/underscore-min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/backbone-min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//1.将数据或者更新的数据保存到服务器上
// Backbone.sync=function(method,model){
// alert(method + ": " + JSON.stringify(model));
// model.set('id', 1);
// }
// var M=Backbone.Model.extend({
// defaults:{
// 'name':'lili',
// },
// url:'/user' //此处一定要写服务器地址
// });
// var m=new M();
// m.save();
// m.save('name','haha');
//2.从服务器上获取数据,一般都是从集合中取值,等从服务器取值完毕后,开始渲染页面
Backbone.sync=function(method,model){
alert(method + ": " + JSON.stringify(model));
model.set('id', 1);
}
var C=Backbone.Collection.extend({
initialize:function(){
this.on('reset',function(){ //从服务器获取完毕后会执行此函数，但是本测试中url是假连接
alert("从服务器拉取值完毕");
})
},
url:'/user',
})
var c=new C();
c.fetch();
</script>
</head>
<body>
</body>
</html>五、Backbone路由和历史管理
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
<script src="js/underscore-min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/backbone-min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//适用于单页面跳转
var W=Backbone.Router.extend({
routes: {
"help": "help", // #help
"search/:query": "search", // #search/kiwis
"search/:query/p:page": "search" // #search/kiwis/p7
},
help: function() {
alert("您打开的是help");
},
search: function(query, page) {
alert("您打开的是search");
}
});
var w=new W();
Backbone.history.start();//此处必须开启Backbone的路由历史管理
</script>
</head>
<body>
</body>
</html>六、事件委托
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
<script src="js/underscore-min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/backbone-min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
var V=Backbone.View.extend({
el:$('body'),
events:{ //通过event进行事件委托
'click a':'aaa',
'mouseover li':'bbb',
},
aaa:function(){
alert("a标签被点击了");
},
bbb:function(){
alert("li标签被鼠标悬浮了");
}
});
var v=new V();
})
</script>
</head>
<body>
<a href="javascript:">我是a标签</a>
<ul>
<li>123</li>
<li>123</li>
<li>123</li>
</ul>
</body>
</html>七、前端模板
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
<script src="js/underscore-min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/backbone-min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//前端模板：主要是控制JS与html分离
//1.js与html混合代码如下:
//$(function(){
//
// var M = Backbone.Model.extend({
// defaults : {
// name : 'hello'
// }
// });
//
// var V = Backbone.View.extend({
//
// initialize : function(){
//
// this.listenTo( this.model , 'change' , this.show );
//
// },
// show : function(model){
// $('body').append( '<div>'+ model.get('name') +'</div>' );
// }
//
// });
//
// var m = new M;
// var v = new V({model:m});
// m.set('name','hi');
//
//});
//2.JS与html分离代码如下(需配合body中template)：
$(function(){
var M = Backbone.Model.extend({
defaults : {
name : 'hello'
}
});
var V = Backbone.View.extend({
initialize : function(){
this.listenTo( this.model , 'change' , this.show );
},
show : function(model){
$('body').append( this.template(this.model.toJSON()) );
},
template:_.template($("#template").html()), //此处用的是underscoreJS里面的_.template方法
});
var m = new M;
var v = new V({model:m});
m.set('name','hi');
});
</script>
</head>
<body>
<!--<script type="text/template" id="template">
<div><%=name%></div>
</script>-->
<script type="text/template" id="template">
<%var i=0;
for(i=0;i<=3;i++){%>
<div><%=name%></div>
<%}%>
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 小易的升级之路-java
- JAVA学习16_Java的ISO、UTC、UNIX时间类型转换
- Java IO：CharArrayReader使用及源码分析
- PHP时区问题
- python：集合set的操作
- Spring工具类ToStringBuilder用法简介
- java.lang.SecurityException: Permission Denial
- OLTP与OLAP的介绍和区别
- 图灵机器人之Python实现
- UFIDL稀疏自编码代码实现及解释
- C# OOP之五 深入理解值类型和引用类型
- C# OOP之五 深入理解值类型和引用类型
- C# OOP之五 深入理解值类型和引用类型
- 夺命雷公狗ThinkPHP项目之----企业网站24之网站前台获取当前栏目和顶级栏目
- 深入理解Java：注解（Annotation）自定义注解入门
- qt项目发布
- c++第四次作业
- （matlab)plot画图的颜色线型
- 关于java的Cliass类
- java中枚举类的使用详解