首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >BackboneJs入门学习[07]—Collection实践

BackboneJs入门学习[07]—Collection实践

作者头像
前端修罗场
发布2023-10-07 16:22:15
发布2023-10-07 16:22:15
28700
代码可运行
举报
文章被收录于专栏:Web 技术Web 技术
运行总次数:0
代码可运行

BackboneJs入门学习—Collection实践

前提回顾:

在上一节当中,我们介绍了Backbone的Collection模块,Collection即集合,但是它是模块的集合,有了Collection,你就能对多个模块进行操作。它就像一个数组一样。

本篇中,ImagineCode(IC)将进一步讲解关于Collection的相关操作。

1.使用fetch()方法从服务器端获取数据

使用前提:要从server获取数据,首先要定义url属性;当然,我们也可以在fetch中定义url的值; 注意:在Collection中,无urlRoot这个属性;

示例:

代码语言:javascript
代码运行次数:0
运行
复制
var bookShelf=new Backbone.Collection;
bookShelf.url='/books/';
bookShelf.fetch({
//获取成功时,返回success信息
	success:function(collection,response,options){
	             collection.each(function(book){
					alert(book.get('title));
	    });
     },
//获取失败时,返回error信息		  
error:function(collection,response,options){
			 alert('error!');
	}
});

2.reset方法

  1. reset() 方法会清空 整个 collection
  2. 要与 fetch 配合使用,因为 collection 在 fetch 到数据后,会调用 reset 方法;
  3. 在 collection 中绑定 reset 方法要在fetch之前,即使用 fetch 获取,使用 reset 渲染;

示例:

代码语言:javascript
代码运行次数:0
运行
复制
var bookshelf=new Backbone.Collection;
bookshelf.bind('reset',showAllBooks);//在fetch之前绑定reset方法

bookshelf.fetch({
		url:'/getbooks/',
						 success:function(collection,response){
		collection.each(function(book)){
			alert(book.get(title));
		});	
	},error:function(collection,response){
		alert('error!');
		}
});
//reset方法
showAllBooks:function(){
	bookshelf.each(function book){
		document.writeIn(book.get(title));
		});
}

3.创建数据到服务端——Create() 在Backbone给出的官方文档中,对集合的Create方法是这个一段介绍:

使用属性哈希(键值对象)实例化一个模型, 然后将该模型保存到服务器, 创建成功后将模型添加到集合中。 为了能正常运行,需要在集合中设置 model 属性。

示例:

代码语言:javascript
代码运行次数:0
运行
复制
var newBooks=Backbone.Collection.extend({
	model:Book,//需要在集合众设置model属性
	url:'/books/'
});
var books=new newBooks;
var oneBook=book.create({
		title:"I am a new book!"
		author:"IC"
});

至此,我们介绍了 Collection 中常用的几个方法,当然,Collection 不仅仅只有这么几种方法,Collection 包含了十几种方法。除此之外,Backbone 还代理了 Underscore.js 用来给Backbone.Collection 提供 6 个对象函数。

Ok,在下一篇中,我们将进入Backbone的新模块的学习——Router(路由)。

每篇一语

昨晚,在看一部2000年贾樟柯导演的《站台》,这不反应改革开放后的青年人群体的反应的影片,在现代电影浪潮的席卷中,并未得到现代年轻人的注目。可是,我想,这部刻画小人物的电影,表现了当时青年人为梦想、生活追逐奔波的想法,虽然最后物是人非,但是却留下了一段历史。对于现在而言,你我也是一样,为了梦想或是生活,你我也将留下一段历史,在你我记忆中。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 每篇一语
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档