backbone 之数据模型

　　Model在Backbone中为数据模型，是一个基础，最根本的基类，用于原始数据，底层方法的封装和定义。

一 、创建一个简单模型对象

1 创建一个简单模型对象

 var student = Backbone.Model.extend({
 　　initialize: function () {
 　　　　intNum++;
 　　　　console.log("您构建了" + intNum + "个对象");
 　　}
 });
var intNum = 0;
 var stuA = new student();
 var stuB = new student();

2 对象模型的赋值方法

 var student = Backbone.Model.extend({
 　　initialize: function () {

 　　}
       defaults: {
                Code: "",
                Name: "",
                Score: ""
       }
 });
var stuA = new student();
stuA.set({
    Code: "10105",
    Name: "陆明明",
     Score: "300"
});
console.log(stuA.get("Name") + " 在 " + stuA.get("Class") + " 读小学");
console.log(stuA.escape("Name") + " 在 " + stuA.escape("Class") + " 读小学");

3 自定义Printlog方法

 var student = Backbone.Model.extend({
 　　initialize: function () {

 　　}
       defaults: {
                Code: "",
                Name: "",
                Score: ""
       }
        PrintLog: function () {
            console.log(stuA.get("Name") + " 在 " + stuA.get("Class") + " 读小学");
            console.log(stuA.escape("Name") + " 在 " + stuA.escape("Class") + " 读小学");
        }
 });

var stuA = new student();
stuA.set({
    Code: "10105",
    Name: "陆明明",
     Score: "300"
});
stuA.PrintLog();

4. 监听Name属性值的变化

var student = Backbone.Model.extend({
    initialize: function () {
//                初始化时监听属性值变化事件
        this.on("change:Name", function (model, value) {
            var oldname = model.previous("Name");
            var newname = value;
            if (oldname != newname) {
                console.log("Name原值:" + oldname + ",新值:" + newname);
      }
});
            },
            defaults: {
            Code: "",
            Name: "ABC",
            Score: ""
       }
});
var stuA = new student();
stuA.set("Name", "CBD");

二、模型对象

2.1 读取数据

5. 调用get方法获取对象指定的对象值

 1 var student = Backbone.Model.extend({
 2     default: {
 3         Code:"",
 4         Name:"",
 5         Score:""
 6     }
 7 });
 8 var stuA = new student({
 9         Code:"10103",
10         Name:"李时华",
11         Score:""
12 })；
13 console.log("学号：" + stuA.get("Code") +
14             "姓名：" + stuA.get("Name") +
15             "性别：" + stuA.get("Sex") +
16             "分数：" + stuA.get("Score"))；

2.2 修改数据

6. set方法批量重置默认属性值

var student = Backbone.Model.extend({
    default: {
        Code:"",
        Name:"",
        Score:""
    }
});
var stuA = new student({
        Code:"10104",
        Name:"周小敏",
        Score:"500"
})；
var stuB = new student();
stuB.set({
        Code:"10105",
        Name:"陆明明",
        Score:"300"
})；
console.log("1. 学号：" + stuA.get("Code") +
            "   姓名：" + stuA.get("Name") +
            "   分数：" + stuA.get("Score"))；
console.log("2. 学号：" + stuB.get("Code") +
            "   姓名：" + stuB.get("Name") +
            "   分数：" + stuB.get("Score"))；

2.3 开启数据验证

7.开启数据验证

var student = Backbone.Model.extend({
    initialize：function(){
        this.on(‘invalid‘,function(model,error){
            console.log(error)
        });
    },
    validate: function(attrs){
        if (!_.isString(attrs.Name) return ‘姓名必须是自负‘
        if (!_.isNumber(attrs.Score)) return ‘分数必须是数字！‘)
    }，
    default: {
        Code:"10001",
        Name:"张三",
        Score:"100"
    }
});

var stuE = new student();
stuE.set({
        Code:"10105",
        Name: 12345,
        Score: 600
}, {"validate": true});
console.log(stuE.toJSON());

2.4 关闭数据验证

8.关闭数据验证

var student = Backbone.Model.extend({
    initialize：function(){
        this.on(‘invalid‘,function(model,error){
            console.log(error)
        });
        this.on(‘change:Name‘,function(model,value){
            console.log("你触发了Name属性修改事件！")
        });
    },
    validate: function(attrs){
        if (!_.isString(attrs.Name) return ‘姓名必须是自负‘
        if (!_.isNumber(attrs.Score)) return ‘分数必须是数字！‘)
    }，
    default: {
        Code:"10001",
        Name:"张三",
        Score:"100"
    }
});

var stuE = new student();
stuE.set({
        Code:"10105",
        Name: 12345,
        Score: 600
}, {"silent:": true});
console.log(stuE.toJSON());

2.5 更新数据回滚

9 更新数据回滚

var student = Backbone.Model.extend({
    initialize：function(){
        this.on(‘invalid‘,function(model,error){
            console.log(error)
        });
        this.on(‘change:Name‘,function(model,value){
            console.log("你触发了Name属性修改事件！")
        });
    },
    validate: function(attrs){
        if (!_.isString(attrs.Name) return ‘姓名必须是自负‘
        if (!_.isNumber(attrs.Score)) return ‘分数必须是数字！‘)
    }，
    default: {
        Code:"10001",
        Name:"张三",
        Score:"100"
    }
});

var stuE = new student();
stuE.set({
        Code:"10105",
        Name: 12345,
        Score: 600
}, {"silent:": true});
console.log(stuE.toJSON());
if (!_.isString(stuE.get("Name")) !_.isNumber(stuE.get("Score"))) {
    setE.set({"Name":stuE.previous("Name"),
    "Score": stuE.previous("Score")});
}
console.log(stuE.toJSON());

2.6 删除数据

10 调用unset方法删除指定属性的数据

var student = Backbone.Model.extend({
    initialize：function(){

    },
    default: {
        Code:"10106",
        Name:"李小明",
        Score:650
    }
});

(stuE.unset("Name");
console.log(stuE.get("Name"));
console.log(stuE.toJSON());
stuE.set("Name", stuE.previous("Name"));
console.log(stuE.toJSON());
stuE.clear();
console.log(stuE.toJSON());

三、对象属性操作

3.1 attributes对象

11 调用attributes对象获取全部的属性值

var student = Backbone.Model.extend({
    initialize：function(){

    },
    default: {
        Code:"10001",
        Name:"张三",
        Score:100
    }
});
var setE  = new student();
stuE.set({
        Code:"10106",
        Name:"李小明",
        Score:650
});

console.log(stuE.attributes);
var attrs =stuE.attributes;
for (var i in attrs) {
    console.log(i + ":" + stuE.attributes[i]);
}

3.2 previous和previousAttributes方法

12 调用previousAttributes方法返回数据

var student = Backbone.Model.extend({
    initialize：function(){

    },
    default: {
        Code:"10001",
        Name:"张三",
        Score:100
    }
});
var setE  = new student();
stuE.set({
        Code:"10106",
        Name:"李小明",
        Score:650
});

console.log(stuE.toJSON());
console.log(stuE.previousAttributes());
console.log("------");
stuE.set({
        Code:"10107",
        Name:"陈天豪",
        Score: 720
})；

console.log(stuE.toJSON());
console.log(stuE.previousAttributes());

3.3 set内部顺序

a. key 或value生成对象

b. 初始化option选项

c. 调用_validate 方法执行验证

d. 调用unset方法删除属性

e. 执行静默方式重置数据

四、同步数据到服务器

4.1 save方法

13 使用save方法发送数据

var student = Backbone.Model.extend({
    initialize：function(){

    },
    url:"/ch4/api/save.php"
    default: {
        Code:"10001",
        Name:"张三",
        Score:100
    }
});
var setE  = new student();
stuE.set({
        Code:"10107",
        Name:"陶国荣",
        Score: 750
});
stuE.save();

14 使用save方法接收数据

var student = Backbone.Model.extend({
    initialize：function(){

    },
    url:"/ch4/api/save.php"
    default: {
        Code:"10001",
        Name:"张三",
        Score:100
    }
});
var setE  = new student();
stuE.set({
        Code:"10107",
        Name:"陶国荣",
        Score: 750
});
stuE.save(null, {
    success: function (model, response) {
        console.log(response.code);
    }
});

15 使用save方法时设置wait属性

var student = Backbone.Model.extend({
    initialize：function(){

    },
    url:"/ch4/api/save.php"
    default: {
        Code:"10001",
        Name:"张三",
        Score:100
    }
});
var setE  = new student();
stuE.set({
        Code:"10107",
        Name:"陶国荣",
        Score: 750
}, {success: function (model, response) {
    console.log(response);
}, wait: true
});
console.log(stuE.toJSON());

4.2 fetch方法

16 使用fetch方法获取服务器数据

var student = Backbone.Model.extend({
    initialize：function(){

    },
    url:"/ch4/api/save.php"
});
var setE  = new student();
stuE.fetch({
    success: function (model, response) {
        console.log(stuE.toJSON());
    },
    error: fun(ction(error) {
            console.log("err");
    }
});

4.3 destory 方法

17 使用destroy方法从服务器删除数据

var student = Backbone.Model.extend({
    initialize：function(){
        this.on(‘destroy‘, function() {
            console.log(‘正在调用destroy方法‘)；
        })；
    },
    url:"/ch4/api/destroy.php",
    idAttribute:"Code"
});
var setE  = new student({
    Code: "10107"
});
stuE.destroy({
    success: function (model, response) {
        if (response.code == "0") {
            console.log("Code为" + model.get("Code") + "的数据已删除")
        }
    },
    error: fun(ction(error) {
            console.log("删除数据出现异常");
    }，
    wait：true
});

小结：

1. 模型封装了对象数据，并提供了一系列对数据进行操作的方法

2. 我们可以在定义模型类、实例化模型对象、和调用set()方法来设置模型中的数据

3. 当模型中数据发生改变时，会触发change事件和属性事件

4. 我们可以定义validate方法对模型中的数据进行验证

通过调用save()、fetch()和destroy()方法可以让模型中的数据与服务器保持同步，但在此之前必须设置url或urlRoot属性

时间： 2024-10-07 23:43:25

backbone 之数据模型的相关文章

Backbone Collection——数据模型集合

如果将一个Model对象比喻成数据库中的一条记录,那么Collection就是一张数据表.它表示为一个模型集合类,用于存储和管理一系列相同类型的模型对象. 1.创建集合集合用于组织和管理多个模型,但它并不是必须的,如果你的某个模型对象是唯一的(单例),那么你没必要将它放到集合中. 我们来看一个创建集合的例子: // 定义模型类 var Book = Backbone.Model.extend({ defaults: { name: '' } }); // 定义集合类 var BookList =

Backbone笔记（续）

Backbone Bockbone 总览 Backbone 与 MVC 模式:解决某一类问题的通用方案 - 套路 MVC:一种架构模式,解耦代码,分离关注点 M(Model) - 数据模型 V(View) - 表现视图 C(Controller) - 控制器 Backbone 与 SPA 传统web应用与 SPA 的区别: 状态概念代替了页面概念 http://www.example.com/page1 http://www.example.com/page2 http://www.exampl

Backbone.js源码分析(珍藏版)

源码分析珍藏,方便下次阅读! // Backbone.js 0.9.2 // (c) 2010-2012 Jeremy Ashkenas, DocumentCloud Inc. // Backbone may be freely distributed under the MIT license. // For all details and documentation: // http://backbonejs.org (function () { // 创建一个全局对象, 在浏览器中表示为w

Backbone.js源码解读(转载)

前言: 个人也翻译过一遍,可是基础知识不够,所以理解的没有很清楚 // Backbone.js 0.9.2 // (c) 2010-2012 Jeremy Ashkenas, DocumentCloud Inc.// Backbone may be freely distributed under the MIT license.// For all details and documentation:// http://backbonejs.org(function () { // 创建一个全

Backbone.js 0.9.2 源码分析收藏

Backbone 为复杂Javascript应用程序提供模型(models).集合(collections).视图(views)的结构.其中模型用于绑定键值数据和自定义事件:集合附有可枚举函数的丰富API: 视图可以声明事件处理函数,并通过RESRful JSON接口连接到应用程序. 源码分析转之网上它人的备注,特收藏一下,以免方便阅读. // Backbone.js 0.9.2 // (c) 2010-2012 Jeremy Ashkenas, DocumentCloud Inc. // Ba

MainData仿Backbone Model式 数据模型记录器

MainData仿Backbone Model式 数据模型记录器主要思想:将 数据记录处理 和 因为数据变化而产生的页面渲染 两者解耦, 让页面元素可以与数据进行关联绑定,杜绝因为遗忘或是逻辑复杂导致的“页面展现与数据不符”现象.同时能更容易地解决大型页面的开发难题.未来还可用于解决多个页面间数据同步困难的难题 /** * 使用方式:数据变化时,调用MainData.set方法来改变内存中的数据.在外部,通过MainData.change方法来监听数据变化,并在回调函数中执行页面渲染. * *

Backbone.js应用基础

前言: Backbone.js是一款JavaScript MVC应用框架,强制依赖于一个实用型js库underscore.js,非强制依赖于jquery:其主要组件有模型,视图,集合,路由:与后台的交互主要是通过Restful JSON 进行数据传输: 基础Backbone.js知识: 1.引入js文件:如果依赖于第三方类库如jquery,则最好先引入:之后引入underscore.js 这是必须引入且在引入backbone.js之前,其引入文档结构如下: <head> <meta ch

Backbone入门

(一)Backbone简介 Backbone是一个轻量级的JavaScript MVC框架,压缩后只有23kb,不过它依赖于Underscore.js和jQuery这两个JS库.Backbone是由Jeremy Ashkenas创建的,Underscore.js也是他创建的,他还创建了CoffeeScript这门优雅的JS转译语言. 模型(Model)是Backbone中的一个关键组件,Model用来存储应用的所有数据,以及直接和数据操作相关的逻辑,包括数据存储,数据验证,以及数据发生变动时触发

【转】Backbone.js学习笔记（二）细说MVC

文章转自: http://segmentfault.com/a/1190000002666658 对于初学backbone.js的同学可以先参考我这篇文章:Backbone.js学习笔记(一) Backbone源码结构 1: (function() { 2: Backbone.Events // 自定义事件 3: Backbone.Model // 模型构造函数和原型扩展 4: Backbone.Collection // 集合构造函数和原型扩展 5: Backbone.Router // 路由