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

最新推荐文章于 2024-10-14 00:28:24 发布
最新推荐文章于 2024-10-14 00:28:24 发布
阅读量134 收藏
点赞数
文章标签： php javascript ViewUI
原文链接：http://www.cnblogs.com/NapXie/p/5610299.html
版权

关于这两天遇到的代码没有找到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.　　源码分析

转载于:https://www.cnblogs.com/NapXie/p/5610299.html

aeo82357
关注
Backbone.js实战之视图学习笔记
aeo82357的博客
06-24 114
　　严格来说模型（Model）和集合（Collection）都属于底层的数据处理，真正与页面交互的视图（View)，他的核心功能是处理数据业务逻辑，绑定DOM事件，渲染模型和集合数据。 el：表示该View所代表的DOM元素，在render函数中，会同步到DOM操作中去。 initialze：调用new时，会触发的函数调用，类似构造函数。 render：触发DOM操作，浏览器会...
Backbone实战-初始Backbone
weixin_30527323的博客
09-11 140
　　随着人们对web应用程序用户体验的重视，越来越多的应用强化了前端代码的开发，使得前端的Javascript代码越加冗长而无序，各类AJAX交互请求错综复杂，如何科学有效地管理这些前端代码，是众多Web开发者面临的一道难题。基于这样一种背景，人们沿用服务器端的MVC结构体系，将其运用于前端技术的开发与管理，而Backbone就是这种结构的最佳实践。 Backbone简介 　　Backbone...
backbone学习笔记—— 入门篇
Vincent的专栏
07-23 764
一 、前言 首先感谢the5fire 的 无私奉献。如有雷同纯属参考！ 在学习5哥 的backbone.js 博客过程中,本人作为个新手 写了如下随笔。 如需学习原版的backbone.js  请参照 http://backbonejs.org/ [官网] !   按照我以往的学习习惯 ，backbone 我以为是一种js 封装起来的 一组组件而已。Actually ， not tha
SpringMVC学习笔记-狂神说
qq_42760375的博客
08-02 205
介绍了MVC框架的历史，和编写springMVC项目所用的关键技术
Backbone基础笔记
aizhanqian5077的博客
01-25 119
之前做一个iPad的金融项目的时候有用到Backbone，不过当时去的时候项目已经进入UAT测试阶段了，就只是改了改Bug，对Backbone框架算不上深入了解，但要说我一点都不熟悉那倒也不是，我不太喜欢这么不尴不尬地将就着，索性学习学习，整理一下好了。 网上的大牛说Backbone适合做大型的项目，小项目用Backbone有那么些杀鸡用牛刀的感觉，我目前的项目组用的是Angul...
遇见狂神说 Spring MVC 学习笔记（完整笔记+代码）
记录一名在读研究生的学习笔记、感悟、开发产物
01-08 1077
狂神课程 Spring MVC 完整学习笔记（附详细代码和操作）
JavaScript笔记
shine_my的博客
03-13 3353
JavaScript笔记
SpringMVC学习笔记整理详细
qq_43431171的博客
06-09 6023
SpringMVC 文章目录SpringMVC1.回顾MVC1.1、什么是MVC1.2、Model1时代1.3、Model2时代1.4、回顾Servlet2、什么是SpringMVC2.1、概述2.2、中心控制器2.3、SpringMVC执行原理3.第一个MVC程序配置版注解版小结4.RestFul和控制器控制器Controller实现Controller接口使用注解@ControllerRequestMappingRestFul 风格扩展：小黄鸭调试法5.数据处理及跳转结果跳转方式ModelAndView
简单了解Backbone.js的Model模型以及View视图的
10-22
Backbone.js是一款流行的JavaScript库，它实现了MVC（模型-视图-控制器）模式，用于构建可维护性和可扩展性良好的前端应用。在Backbone.js中，Model和View是两个核心组件，它们分别负责数据管理和用户界面的呈现。 ...
Backbone.js中的集合详解
10-24
Backbone.js中的核心组件之一就是集合（Collection），它是对一组模型（Model）的封装，提供了一系列方法来操作这些模型，包括增删改查等。本篇详解将深入了解Backbone.js集合的功能和用法，并探讨它与其他组件之间...
Backbone.js(1.1.2) API中文文档.zip Backbone.js离线文档
12-25
Backbone.js是一款轻量级的JavaScript库，专为构建丰富的Web应用程序而设计。它通过提供模型（Models）、视图（Views）、集合（Collections）和路由器（Routers）等核心概念，帮助开发者组织代码并实现MVC（Model-...
Qualitor checkAcesso.php 任意文件上传漏洞复现(CVE-2024-44849)
0xSec
10-09 267
​Qualitor 8.24及之前版本存在任意文件上传漏洞,未经身份验证远程攻击者可利用该漏洞代码执行，写入WebShell,进一步控制服务器权限。
0.0.0.0 127.0.0.1等几个特殊的IP地址
zhurobert的博客
10-10 408
0.0.0.0 127.0.0.1 255.255.255.255等特殊地址
PHP智慧餐饮新风尚点餐系统
2401_84593614的博客
10-10 563
总的来说，智慧餐饮新风尚点餐系统不仅为顾客带来了便捷、高效、个性化的点餐体验，也为餐厅提供了有力的运营支持。它让美食与科技实现了完美结合，让我们在享受美食的同时，也能感受到科技的魅力。如果你还没有尝试过这款点餐系统，不妨找个机会去体验一下，相信它会给你带来不一样的惊喜！
【OSCP Proving Grounds 靶场系列】Slort
最新发布
Eason_LYC安全白帽子的成长博客
10-14 196
【OSCP Proving Grounds 靶场系列】Slort
wordpress使用popup弹窗插件的对比
shuanghusun的专栏
10-09 926
最重要的是，它还有许多其他功能，包括重定向确认、onClick 弹出窗口、多种动画效果、支持 3rd 方插件等等。是免费提供的最好的 WordPress 弹出插件。许多网站严重依赖销售收入，但由于各种因素，大多数访问者会在没有购买的情况下离开您的网站。它有许多自定义选项，包括视频灯箱、无限制的弹出窗口、翻译、可自定义的 YouTube 设置（开始时间、结束时间、禁用相关视频）等等。这可能是您让他们订阅您的电子邮件订阅的最后机会，因此请充分利用它。他们在您的网站上停留的时间越长，他们购买东西的可能性就越大。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值