Backbone.js入门教程第二版笔记(1)
2024-08-30 14:43:26
1、模块 集合 视图 和事件的一个综合例子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery-1.9.1.js"></script>
<script src="underscore.js"></script>
<script src="backbone.js"></script> </head>
<body>
<button id="check">新手报到</button>
<ul id="world-list">
</ul>
<script>
(function ($) { var World=Backbone.Model.extend({
name:null //为什么要创建一个空的name
}); var Worlds=Backbone.Collection.extend({
initialize:function(models,options){
this.on("add", options.view.addOneWorld);//初始化绑定add方法
}
}); var AppView=Backbone.View.extend({
el:$('body'),//指定关联的元素
initialize:function(){//初始化方法
this.worlds=new Worlds(null,{view:this})//实例化一个集合,并且建一个属性view用来保存视图
},
events:{
'click #check':"checkIn"//绑定#check的click事件
},
checkIn:function(){
var world_name=prompt("请问,您是哪星人?");
world_name||(world_name = '未知'); var world=new World({name:world_name});//实例化一个模块,并设置name的值
this.worlds.add(world);//将模块添加到集合
},
addOneWorld:function(model){
$("#world-list").append("<li>这里是来自 <b>" + model.get('name') + "</b> 星球的问候</li>");
}
});
var appview = new AppView;//实例化AppView })(jQuery);
</script>
</body>
</html>
2、为对象添加验证规则与错误提示
var User=Backbone.Model.extend({
defaults:{
name:'susan',
age:18
},
url:"1.html",//需要设置url,因为save会调用sync方法把数据提交到服务器
initialize:function(){
this.on("invalid",function(model,error){//初始化时绑定验证未通过时的事件处理函数
console.log(error);
});
},
validate:function(attributes){//重写验证方法 不返回或返回falsy值(假值)时不会触发invalid?
if(attributes.name==""){
return "name 不能为空!";
}
}
});
var user=new User();
user.set("name","");
user.save();//当save时会触发validate方法
3 根目录 urlRoot
var Book = Backbone.Model.extend({
urlRoot:'/backbone_test',
defaults:{"name":"Su","age":14}
}); var solaris = new Book({id: "data.php"}); console.log(solaris.url());///backbone_test/data.php solaris.save();
4 使用fetch从服务端获取数据(collection中并没有urlRoot属性)
var Book = Backbone.Model.extend({//创建一个Model
defaults : {
title:'default'
}
}); var BookShelf = Backbone.Collection.extend({//创建一个集合
model : Book,
url:'user.json'
}); var book1 = new Book({title : 'book1'});//实例化二个model
var book2 = new Book({title : 'book2'}); var bookShelf = new BookShelf([book1, book2]); //实例化集合,并将这2个model添加到集合中,也可以使用collection.add(model)添加。 // bookShelf.url = 'user.json'; //或者在这里添加url
bookShelf.fetch({
success:function(collection, response, options){
collection.each(function(book){
console.log(book.get('title'));//default
});
},error:function(collection, response, options){
console.log('error');
}
});
6 create方法 发送数据到服务端
var NewBooks = Backbone.Collection.extend({
model: Book,
url: '/books/'
}); var books = new NewBooks; var onebook = books.create({
title: "I'm coming",
});
create方法会在内部调用save方法,而save方法前面提过它会调用sync把数据提交到服务器。看源码也可以知道,create方法最后返回了创建的model实例
最新文章
- 初学 react | redux
- jquery easyui的treegrid的控制
- canvas模仿微信抢红包功能
- lintcode:形状工厂
- SQL Server中Delete语句表名不能用别名
- Sql Server2005 Transact-SQL 窗口函数(OVER)
- C++程序的构成和书写形式
- .net 安装remoting服务
- QTP实践总结
- POIXV Permutation
- MySql - JdbcType - Oracle类型映射
- Azure IoT 技术研究系列5-Azure IoT Hub与Event Hub比较
- BAT美团滴滴java面试大纲(带答案版)之三:多线程Lock
- 【大数据安全】基于Kerberos的大数据安全验证方案
- python 迭代器 一个奇怪的解决方法
- MySql联合查询
- Linux内存管理--物理内存分配【转】
- Nwjs开发桌面应用
- (67)Wangdao.com第十一天_JavaScript 数组的遍历
- Java扫描classpath指定包路径下所有class
热门文章
- HDU 6138 Fleet of the Eternal Throne 后缀数组 + 二分
- SequenceFile
- Comparing Random and Sequential Access in Disk and Memory
- hihoCoder 1584 Bounce 【数学规律】 (ACM-ICPC国际大学生程序设计竞赛北京赛区(2017)网络赛)
- 用secureCRT ssh登陆不显示用户名和路径解决方案 分类: 软件工具学习 2015-03-18 16:52 36人阅读 评论(0) 收藏
- [RK3288][Android6.0] 调试笔记 --- 系统识别不同硬件版本方法【转】
- ios打印frame等格式
- 修改RedHat的系统显示时间
- 6-5 Haar特征2
- 怎样在github上协同开发