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

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

BackboneJs入门学习—Collection实践

前提回顾:

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

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

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

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

注意:在Collection中,无urlRoot这个属性;

示例:

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渲染;

示例:

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 属性。

示例:

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


相关文章
|
18天前
|
存储 Java
从零开始学习 Java:简单易懂的入门指南之Map集合(二十三)
从零开始学习 Java:简单易懂的入门指南之Map集合(二十三)
|
18天前
|
安全 Java
从零开始学习 Java:简单易懂的入门指南之不可变集合、方法引用(二十六)
从零开始学习 Java:简单易懂的入门指南之不可变集合、方法引用(二十六)
|
18天前
|
Java API
从零开始学习 Java:简单易懂的入门指南之File类(二十九)
从零开始学习 Java:简单易懂的入门指南之File类(二十九)
|
9月前
|
存储 Java 索引
从零开始学习 Java:简单易懂的入门指南之数组(五)
数组指的是一种容器,可以同来存储同种数据类型的多个值。​ 但是数组容器在存储数据的时候,需要结合隐式转换考虑。比如:定义了一个int类型的数组。那么boolean。double类型的数据是不能存到这个数组中的,​ 但是byte类型,short类型,int类型的数据是可以存到这个数组里面的。
|
8月前
|
设计模式 架构师 Java
阿里P8架构师都要学习研究的java加强版23种设计模式神级PDF文档
说在前面的话 Java作为老牌纯正的编程语言,在规范性上有着天然优势。因此本版的设计模式讲解全部用Java语言来描述,并针对Java语言的特性对讲解内容做了相当大的改动。 不知道大家是否听过编程界的一段话:掌握设计模式相当于华山派的"气宗",是程序员的内功修为,虽然在同样的学习时间下,类似Python这种"剑宗"的开发模式见效更快,但是长远来看,"气宗"才是走向软件架构师以上级别的必由之路。 所以,掌握气宗就掌握了编程命脉,然而学习设计模式有四大境界: 接下来给大家分享的就是java溢彩加强版大话设计模式包含的内容知识点。 总目录 主要内容 本文是百万销量的经典畅销书《
141 0
|
18天前
|
存储 Java 索引
从零开始学习 Java:简单易懂的入门指南之Collection集合及list集合(二十一)
从零开始学习 Java:简单易懂的入门指南之Collection集合及list集合(二十一)
|
18天前
|
存储 安全 Java
从零开始学习 Java:简单易懂的入门指南之泛型及set集合(二十二)
从零开始学习 Java:简单易懂的入门指南之泛型及set集合(二十二)
|
18天前
|
Java
从零开始学习 Java:简单易懂的入门指南之HashMap及TreeMap源码解读(二十四)
从零开始学习 Java:简单易懂的入门指南之HashMap及TreeMap源码解读(二十四)
|
6月前
|
Java 容器
史上最全的Java容器集合之入门
史上最全的Java容器集合之入门
29 0
|
9月前
|
算法 Java
从零开始学习 Java:简单易懂的入门指南之包装类(十九)
从零开始学习 Java:简单易懂的入门指南之包装类(十九)