backbonejs学习之路二 collections篇

collections顾名思义就是集合咯，model的集合啦。是不是很简单。我还是将上篇的model对象结合着讲下去吧。

 var PhotoCollection = Backbone.Collection.extend({

//这个Photo就是上次讲的Photo的Model对象 

model: Photo

});

var photoCollection = new Backbone.Collection();

没办法，这个代码编辑器太蛋疼了。。。 这样一个Photo的collections就创建起来了。。。是不是很简单。当然了，跟Java等语言对collection提供的方法一样，同样有setter,getter,remove,add方法。这些个比较常用啦。

        var skiingEpicness = PhotoCollection.get(2); 

    var a = new Backbone.Model({ title: 'my vacation'}),  
             b = new Backbone.Model({ title: 'my holiday'});
    var photoCollection = new PhotoCollection([a,b]);
    photoCollection.remove([a,b]);

 如何从服务器端获取Models呢？

我以jsp为例子

 

 servlet代码

 1     public void doGet(HttpServletRequest request, HttpServletResponse response)
 2             throws ServletException, IOException {
 3 
 4         response.setContentType("text/html");
 5         PrintWriter out = response.getWriter();
 6         List<Photo> photos = new ArrayList();
 7         Photo photo = new Photo();
 8         photo.setSrc("photo1.png");
 9         photo.setTitle("photo1");
10         photos.add(photo);
11         photo.setSrc("photo2.png");
12         photo.setTitle("photo2");
13         photos.add(photo);
14         String result="[";
15         for(int i = 0;i<photos.size() ;++i){
16             if(i!=photos.size()-1)    
17                 result += "{\"src\":\""+photos.get(i).getSrc()+"\",\"title\":\""+photos.get(i).getTitle()+"\"},";
18             else
19                 result += "{\"src\":\""+photos.get(i).getSrc()+"\",\"title\":\""+photos.get(i).getTitle()+"\"}";
20         }
21         result+="]";
22         out.println(result);
23         out.flush();
24         out.close();

25     }

 

很简单，我就不多做解释了。下面是前台代码.

  1 //从服务器取

 2                 photoCollection.url = 'photos';
 3                 photoCollection.fetch({
 4                     success:function(model,response){
 5                             
 6                             console.log(model);
 7                             //将接收到的model对象序列化为json字符串
 8                             console.log( JSON.stringify(model));
 9                             //将json字符串转化成json对象
10                             console.log($.parseJSON(JSON.stringify(model))[0].src);
11                     },
12                     error:function(){
13                             console.log('error');
14                     }
15                 });

 好了，是不是很简单啊