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]);
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();
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 });
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 });
好了,是不是很简单啊