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