Backbone.js实战之模型集合学习笔记

关于这两天遇到的代码没有找到PHP页面，或者有跨域的问题；

解决方案：

1.在本机中安装PHP开发环璄，并可以执行PHP代码的页面；

2.将HTML页与PHP放置在同一个文件夹中，否则会有跨域问题；

3.将HTML页与PHP一直发给可以执行PHP页面代码的服务器；

4.或者做本地存储localStorage；

2,3,4其中一种都可行

 

一、创建集合对象

创建集合模型分两种，一种是自定义集合对象，一种是直接实例化集合对象，从执行效果看，后一种更简洁；

5-1.  自定义集合对象

5-1.1.       功能描述

5-1.2.       实现代码

        var student = Backbone.Model.extend({
            defaults: {
                Code: "",
                Name: "",
                Score: ""
            }
        });
        var stulist = Backbone.Collection.extend({
            model: student
        });
       

        var stumodels = [{
            Code: "10104",
            Name: "周小敏",
            Score: 500
        }, {
            Code: "10106",
            Name: "占小方",
            Score: 380
        }, {
            Code: "10107",
            Name: "陈天豪",
            Score: 720
        }];
        var stus  = new stulist(stumodels);
        for (var i = 0; i < stus.models.length; i++) {
            console.log(stus.models[i].toJSON());
        }

　　

5-1.3.       页面效果

5-1.4.       源码分析

5-2. 实例化集合对象

5-2.1.       功能描述

5-2.2.       实现代码

var student = Backbone.Model.extend({
defaults: {
Code: "",
Name: "",
Score: ""
}
});

var stumodels = [{
Code: "10104",
Name: "周小敏",
Score: 500
}, {
Code: "10106",
Name: "占小方",
Score: 380
}, {
Code: "10107",
Name: "陈天豪",
Score: 720
}];

var stus = new Backbone.Collection(stumodels,{
model: student
});
for (var i = 0; i < stus.models.length; i++) {
console.log(stus.models[i].toJSON());
}

5-2.3.       页面效果

5-2.4.       源码分析

 

5-3. 自定义集合方法

5-3.1.       功能描述

5-3.2.       实现代码

        var student = Backbone.Model.extend({
            defaults: {
                Code: "10001",
                Name: "张三",
                Score: 100
            },
            idAttribute:"Code"
        });       

        var stulist = Backbone.Collection.extend({
            initialize: function() {
                this.on("add", function (model, response, options) {
                    console.log(stus.models[0].toJSON());
                });
            },
            model: student,
            url: "http://localhost/create2.php"
        });
        var stus = new stulist();
        stus.create({
            Code:"10107",
            Name:"陶国荣",
            Score:750
        },{
            wait: false,
            success: function (model, response, options) {
                console.log(response.changed.code);
            }
        });

 

5-3.3.       页面效果

5-3.4.       源码分析

 

二、操作集合中的模型对象

5-4. 移除集合对象中的模型

5-4.1.       功能描述

5-4.2.       实现代码

        var student = Backbone.Model.extend({
            defaults: {
                Code: "",
                Name: "",
                Score: 0
            }
        });       
        var stumodels = [{
            Code: "10101",
            Name: "刘真真",
            Score: 530
        }, {
            Code: "10102",
            Name: "张明基",
            Score: 460
        }, {
            Code: "10103",
            Name: "舒虎",
            Score: 660
        }, {
            Code: "10104",
            Name: "周小敏",
            Score: 500
        }, {
            Code: "10105",
            Name: "陆明明",
            Score: 300
        }, {
            Code: "10106",
            Name: "占小方",
            Score: 380
        }, {
            Code: "10107",
            Name: "陈天豪",
            Score: 720
        }];
        var stus  = new Backbone.Collection(stumodels,{
            Model:student
        });
        stus.shift();
        stus.remove(stus.models[3]);
        stus.pop();
        for (var i = 0; i < stus.models.length; i++) {
            console.log(stus.models[i].toJSON());
        }

 

5-4.3.       页面效果

5-4.4.       源码分析

 

5-5. 添加集合对象中的模型

5-5.1.       功能描述

5-5.2.       实现代码

        var student = Backbone.Model.extend({
            defaults: {
                Code: "",
                Name: "",
                Score: 0
            }
        });       
        var stumodels = [{
            Code: "10101",
            Name: "刘真真",
            Score: 530
        }, {
            Code: "10102",
            Name: "张明基",
            Score: 460
        }, {
            Code: "10103",
            Name: "舒虎",
            Score: 660
        }, {
            Code: "10104",
            Name: "周小敏",
            Score: 500
        }, {
            Code: "10105",
            Name: "陆明明",
            Score: 300
        }, {
            Code: "10106",
            Name: "占小方",
            Score: 380
        }, {
            Code: "10107",
            Name: "陈天豪",
            Score: 720
        }];
        var newmodels = [{
            Code: "10108",
            Name: "李煜",
            Score: 570
        }, {
            Code: "10109",
            Name: "钟舒畅",
            Score: 460
        }, {
            Code: "10110",
            Name: "佟明月",
            Score: 680
        }];
        var stus  = new Backbone.Collection(stumodels,{
            model:student
        });
        stus.unshift(newmodels[1]);
        stus.add(newmodels[0], {at:5});
        stus.push(newmodels[2]);
        for (var i = 0; i < stus.models.length; i++) {
            console.log(stus.models[i].toJSON());
        }

 

5-5.3.       页面效果

5-5.4.       源码分析

 

5-6. 查找集合对象中的模型

5-6.1.       功能描述

5-6.2.       实现代码

       var student = Backbone.Model.extend({
            defaults: {
                Code: "",
                Name: "",
                Score: 0
            },
            idAttribute:"Code"
        });       
        var stumodels = [{
            Code: "10101",
            Name: "刘真真",
            Score: 530
        }, {
            Code: "10102",
            Name: "张明基",
            Score: 460
        }, {
            Code: "10103",
            Name: "舒虎",
            Score: 660
        }, {
            Code: "10104",
            Name: "周小敏",
            Score: 500
        }, {
            Code: "10105",
            Name: "陆明明",
            Score: 300
        }, {
            Code: "10106",
            Name: "占小方",
            Score: 380
        }, {
            Code: "10107",
            Name: "陈天豪",
            Score: 720
        }];
        var stus  = new Backbone.Collection(stumodels,{
            model:student
        });
        for (var i = 0; i < stus.models.length; i++) {
            console.log(stus.models[i].toJSON());
        }
        console.log("----------------查询结果------------------");
        var find_id_model = stus.get(10106);
        var find_at_model = stus.at(6);
        var find_0_model = stus.findWhere({
            Score:660
        });
        var find_1_model = stus.where ({
            Score:660
        },true);
        var find_2_model = stus.where({
            Score:660
        },false);
        console.log(find_id_model.toJSON());
        console.log(find_at_model.toJSON());
        console.log(find_0_model.toJSON());
        console.log(find_1_model.toJSON());
        for (var i = 0; i < find_2_model.length; i++) {
            console.log(find_2_model[i].toJSON());
        }

 

5-6.3.       页面效果

5-6.4.       源码分析

 

5-7. 集合中模型对象的排序

5-7.1.       功能描述

5-7.2.       实现代码

        var student = Backbone.Model.extend({
            defaults: {
                Code: "",
                Name: "",
                Score: 0
            },
            idAttribute:"Code"
        });       
        var stumodels = [{
            Code: "10101",
            Name: "刘真真",
            Score: 530
        }, {
            Code: "10102",
            Name: "张明基",
            Score: 460
        }, {
            Code: "10103",
            Name: "舒虎",
            Score: 660
        }, {
            Code: "10104",
            Name: "周小敏",
            Score: 500
        }, {
            Code: "10105",
            Name: "陆明明",
            Score: 300
        }, {
            Code: "10106",
            Name: "占小方",
            Score: 380
        }, {
            Code: "10107",
            Name: "陈天豪",
            Score: 720
        }];

        var stus = new Backbone.Collection(stumodels,{
            model:student,
            comparator: function (model_1, model_2) {
                var intcomp = model_1.get ('Score') > model_2.get('Score');
                return intcomp ? 0 : 1;
            }
        });
        stus.sort();
        for (var i = 0; i < stus.models.length; i++) {
            console.log(stus.models[i].toJSON());
        }
        stus.remove(stus.models[3]);
        stus.add({
            Code:"10108",
            Name:"李煜",
            Score:570
        });
        console.log("------------------------排序结果----------------");
        for (var i = 0; i < stus.models.length; i++) {
            console.log(stus.models[i].toJSON());
        }

 

5-7.3.       页面效果

5-7.4.       源码分析

 

三、与服务器交互中模型对象

1. 调用fetch方法获取服务器数据

5-8. 调用fetch方法获取服务器数据

5-8.1.       功能描述

5-8.2.       实现代码

        var student = Backbone.Model.extend({
            defaults: {
                Code: "",
                Name: "",
                Score: 0
            }
        });       

        var stulist = Backbone.Collection.extend ({
            initialize: function () {
                console.log("--------------reset 事故触发------------");
                this.on("reset", function (render) {
                    for (var i = 0; i < render.models.length; i++) {
                        console.log(render.models[i].toJSON());
                    }            
                });
            },
            model:student,
            url:"http://localhost/fetch.php"
        });
        var stus = new stulist();
        stus.fetch({
            reset:true,
            success: function (collection, resp, options) {
                console.log("-------------请求成功时触发-------------");
                for (var i = 0; i < collection.models.length; i++) {
                    console.log(collection.models[i].toJSON());
                }               
            }
        });

 

5-8.3.       页面效果

5-8.4.       源码分析

 

2. 调用create方法与服务器同步数据

5-9． POST和PUT方式发送数据

5-9.1.　　功能描述

5-9.2.　　实现代码

    <script type="text/javascript">
        var student = Backbone.Model.extend({
            defaults: {
                Code: "10001",
                Name: "张三",
                Score: 100
            }

        });       

        var stulist = Backbone.Collection.extend({
            model:student,
            url:"http://localhost/create.php"

        });
        var stus = new stulist();
        stus.create({
            Code:"10107",
            Name:"陶国荣",
            Score:750    
        });

 

5-9.3.　　页面效果

5-9.4.　　源码分析

 

5-10．    触发集合的add事件

5-10.1.　　功能描述

5-10.2.　　实现代码

        var student = Backbone.Model.extend({
            defaults: {
                Code: "10001",
                Name: "张三",
                Score: 100
            },
            idAttribute:"Code"
        });       

        var stulist = Backbone.Collection.extend({
            initialize: function() {
                this.on("add", function (model, response, options) {
                    console.log(stus.models[0].toJSON());
                });
            },
            model:student,
            url:"http://localhost/create.php"
        });
        var stus = new stulist();
        stus.create({
            Code:"10107",
            Name:"陶国荣",
            Score:750
        });

 

5-10.3.　　页面效果

5-10.4.　　源码分析

5-11. 设置wait和slient属性

5-11.1.　　功能描述

5-11.2.　　实现代码

        var student = Backbone.Model.extend({
            defaults: {
                Code: "10001",
                Name: "张三",
                Score: 100
            },
            idAttribute:"Code"
        });       

        var stulist = Backbone.Collection.extend({
            initialize: function() {
                this.on("add", function (model, response, options) {
                    console.log(stus.models[0].toJSON());
                });
            },
            model: student,
            url: "http://localhost/create2.php"
        });
        var stus = new stulist();
        stus.create({
            Code:"10107",
            Name:"陶国荣",
            Score:750
        },{
            wait: false,
            success: function (model, response, options) {
                console.log(response.changed.code);
            }
        });

 

5-11.3.　　页面效果

 

5-11.4.　　源码分析