Backbone 的数据模型集合学习

 这个主要学习backbone数据的处理方法，数据格式一般是json格式，数据的请求，处理，发送，这三种状态；有对模型、模型集合的操作。主要从以下几方面来进行学习，

1、数据模型集合怎么创建，初始化

下面代码中  有模型的初始化，有集合的初始化，模型数据的创建，怎么把模型初始化到模型集合中。  然后再页面的console中输出。

<script type="text/javascript">
     
     var Book=Backbone.Model.extend({
        defaults:{
            name :''
        }
     });
    
     var BookList=Backbone.Collection.extend({
        model:Book
     });

    var book1=new Book({
        name:'Effective Java'
    });
    var book2=new Book({
        name : 'Hibernate Java'
    });

    var books =new BookList([book1,book2]);
    console.dir(books);
        
</script>

    注意：注意集合中添加model时的方式，控制台怎么显示集合中的数据： 数据都存储在attribute属性中，所以在改变model中值的时候需要 使用 set 和get 方法。Console的 dir 方法用来对一个对象进行检查（ inspect ），并以易于阅读和打印的格式显示。

      对于上面创建模型的时候也可以用clone方法，然后再对模型set设置值；这样可以简化创建流程，代码如下： 

var book2=book1.clone();
     book2.set('name','java core');
     
    var book3=book1.clone();
     book3.set('name','java SE');

2.在集合中添加对象的方法：     

   add()：向集合中的指定位置插入模型，如果没有指定位置，默认追加到集合尾部

   push()：将模型追加到集合尾部（与add方法的实现相同）

   unshift()：将模型插入到集合头部  

   当需要指定位置是 使用at 命令，上面三个方法都可以 指定插入的位置

示例代码如下：    

 books.add({  
    name : '构建高性能Web站点',  
    price : 56.30  
}, {
    at :0
} );

     

  3.删除集合中的对象     

    remove()：从集合中移除一个或多个指定的模型对象

    pop()：移除集合尾部的一个模型对象

    shift()：移除集合头部的一个模型对象   

var Book = Backbone.Model.extend({  
    defaults : {  
        name : '',  
        price : 0  
    }  
});  
  
// 定义初始化数据  
var data = [{  
    name : '构建高性能Web站点',  
    price : 56.30  
}, {  
    name : '深入分析Java Web技术内幕',  
    price : 51.80  
}, {  
    name : '编写高质量代码:Web前端开发修炼之道',  
    price : 36.80  
}, {  
    name : '基于MVC的JavaScript Web富应用开发',  
    price : 42.50  
}, {  
    name : 'RESTful Web Services Cookbook中文版',  
    price : 44.30  
  
}]  
//创建集合对象  
var books = new Backbone.Collection(data, {  
    model : Book  
});  
  
books.remove(books.models[2]);  
books.pop();  
books.shift();  

 console.dir(books.models);

      

     4.在集合中查找元素     

        get()：根据模型的唯一标识（id）查找模型对象

        getByCid()：根据模型的cid查找模型对象

        at()：查找集合中指定位置的模型对象

         where()：根据数据对集合的模型进行筛选

     

1.	var Book = Backbone.Model.extend({  
2.	    defaults : {  
3.	        name : '',  
4.	        price : 0  
5.	    }  
6.	});  
7.	  
8.	// 定义初始化数据  
9.	var data = [{  
10.	    id : 1001,  
11.	    name : '构建高性能Web站点',  
12.	    price : 56.30  
13.	}, {  
14.	    id : 1002,  
15.	    name : '深入分析Java Web技术内幕',  
16.	    price : 51.80  
17.	}, {  
18.	    id : 1003,  
19.	    name : '编写高质量代码:Web前端开发修炼之道',  
20.	    price : 36.80  
21.	}, {  
22.	    id : 1004,  
23.	    name : '基于MVC的JavaScript Web富应用开发',  
24.	    price : 42.50  
25.	}, {  
26.	    id : 1005,  
27.	    name : 'RESTful Web Services Cookbook中文版',  
28.	    price : 44.30  
29.	}]  
30.	  
31.	// 创建集合对象  
32.	var books = new Backbone.Collection(data, {  
33.	    model : Book  
34.	});  
35.	  
36.	// 根据id和cid查找模型对象  
37.	var book1 = books.get(1001);  
38.	var book2 = books.getByCid('c2');  
39.	  
40.	// 在控制台输出模型  
41.	console.dir(book1);  
42.	console.dir(book2);

          其中注意getByCid 是模型自带的一个参数为c1，c2， 在控制台输出的时候 attribute显示的id是才c1

     而对于where的使用：    

8.	// 根据price从集合中查找模型  
9.	var book4 = books.where({  
10.	    price : 51.80  
11.	});  
12.	  
13.	// 在控制台输出模型  
14.	console.dir(book4); 

   

5.从服务器中获取集合数据      

         Collection也提供了两个与服务器进行交互的方法：

        fetch()：用于从服务器接口获取集合的初始化数据，覆盖或追加到集合列表中

        create()：在集合中创建一个新的模型，并将其同步到服务器        

       etch（） 需要设置服务器的接口位置，在这里直接设置成一个 json格式的数据

       

  api.json为：
[{  
    "id" : "1001",  
    "name" : "构建高性能Web站点",  
    "price" : "56.30"  
}, {  
    "id" : "1002",  
    "name" : "深入分析Java Web技术内幕",  
    "price" : "51.80"  
}, {  
    "id" : "1003",  
    "name" : "编写高质量代码:Web前端开发修炼之道",  
    "price" : "36.80"  
}, {  
    "id" : "1004",  
    "name" : "基于MVC的JavaScript Web富应用开发",  
    "price" : "42.50"  
}, {  
    "id" : "1005",  
    "name" : "RESTful Web Services Cookbook中文版",  
    "price" : "44.30"  
}]

代码为：
 <script type="text/javascript">
     
  // 定义模型类  
var Book = Backbone.Model.extend({  
    defaults : {  
        name : '',  
        price : 0  
    }  
});  
  
// 定义集合类  
var BookList = Backbone.Collection.extend({  
    model : Book,  
    url : 'api.json'  
});  
  
// 创建集合对象, 并从服务器同步初始化数据  
var books = new BookList();  
books.fetch({  
    success: function(collection, resp) {  
        // 同步成功后在控制台输出集合中的模型列表  
        console.dir(collection.models);  
    }  
}); 
  

</script>

   6.集合中模型的排序 

           Collection的排序中，只能对add添加的元素进行一个排序，也就是其它的添加元素的方法，如 push，unshift 是不能进行一个排序的。

      

<script type="text/javascript">
     
  var Book = Backbone.Model.extend({  
    defaults : {  
        name : '',  
        price : 0  
    }  
});  
  
// 创建集合对象  
var books = new Backbone.Collection(null, {  
    model : Book,  
    comparator : function(m1, m2) {  
        var price1 = m1.get('price');  
        var price2 = m2.get('price');  
  
        if(price1 > price2) {  
            return 1;  
        } else {  
            return 0;  
        }  
    }  
});  
  
books.add({  
    name : '构建高性能Web站点',  
    price : 56.30  
});  
  
books.add({  
    name : '深入分析Java Web技术内幕',  
    price : 51.80  
});  
  
books.add({  
    name : '编写高质量代码:Web前端开发修炼之道',  
    price : 36.80  
});  
  
books.add({  
    name : '基于MVC的JavaScript Web富应用开发',  
    price : 42.50  
}, {  
    at : 1  
});  
  
books.add({  
    name : 'RESTful Web Services Cookbook中文版',  
    price : 44.30  
  
}, {  
    at : 2  
});  
  
// 在控制台输出集合中的模型列表  
console.dir(books.models);  
    </script>