Backbone模型

现今跻身最紧要的组件 –
模型。模型用来存储应用的备数据,以及一直跟多少操作相关的逻辑。Backbone中的型类是Backbone.Model,它富含了数据存储,数据说明,以及数发生变更时点相关动作。

貌似可以管模型和后端绑定(ORM),模型改变之而于后端发起呼吁(Ajax)更新数据(数据库)。也来将模型与DOM元素绑定,模型改变时更新HTML界面。

 

模型

可以一直new一个Backbone.Model,它回到一个Model实例

var model = new Backbone.Model()
model.set({name: 'Backus', age: 35})

啊可扩大Backbone.Model,定义自己之模型类(构造器)

var Person = Backbone.Model.extend({
    initialize: function(name, age) {
        this.set({name: name, age: age})
    }
})

extend的率先独参数为一个靶,它以改为模型实例的属性。第二单参数将成为类属性(类静态属性、方法)。这当 Backbone的写类方式
有所提及。

 

范与性能 – set/get

行使set和get方法来安或取模型的性。属性在范实例上发生一个特地的习性来囤:this.attributes,set/get都绕this.attributes操作。

图片 1

装模型Person的属性

var p1 = new Person()
p1.set({name: 'Backus', age: 87})

Firefox控制台使用get方法得到属性

图片 2

set方法除了可以接受对象形式参数,也得以承受前少单key,value方式。

图片 3

set方法中对这做了相当,第一单参数key如果是目标类型,直接用该目标拷贝到this.attributes上,如果key是字符串,那么将以内部拿key,value转成一个现对象attrs再拷贝到this.attributes上。

 

set还时有发生第三个可挑选参数options,如果设置了options.validate=true,且模型如果定义了validate方法,那么每次设置时拿调用该措施开展校验,校验不经过将不进行后续设置,而一直归。

var Person = Backbone.Model.extend({
    validate: function(attrs) {
        if ( !_.isString(attrs.name) ) return 'name 必须是字符串类型'
        if ( !_.isNumber(attrs.age) ) return 'age 必须是数字类型'
    }
})
var p1 = new Person()
p1.on('invalid', function(model, error, agr) {
    console.log(error)
})
p1.set({name: 'Backus', age: 87})

自打控制高输入如下

图片 4

好看来输出了提示信息“name 必须是字符串类型”,再打印出p1的JSON格式

图片 5

可以看name仍然是“Backus”,并未修改。

 

当set方法中会调用私有的this._validate方法,该方式如下

_validate: function(attrs, options) {
  if (!options.validate || !this.validate) return true;
  attrs = _.extend({}, this.attributes, attrs);
  var error = this.validationError = this.validate(attrs, options) || null;
  if (!error) return true;
  this.trigger('invalid', this, error, _.extend(options, {validationError: error}));
  return false;
}

1.0跟前版本实现不同,必须出示的安options.validate=true,且模型必须实现this.validate方法,才见面进行验证,否则直接归true。1.0之前默认就进展求证,无需设置options.validate为true。验证无效(失败)后会见派发“invalid”事件,因此可以监听该事件做持续处理,比如显示有不可或缺的提示信息。

 

默认情况下,set调用都见面沾“change”事件,如下

p1.on('change', function(model, error) {
    console.log('attributes has changed')
})
p1.set({name: 'Backus', age: 87})

乃可以以回调函数中错过创新视图或拍卖特定的事情逻辑。如果您来得设置第三只参数中silent为true,将无见面接触“change”事件。

p1.set({name: 'Backus', age: 87}, {silent: true})

 

自set源码可以看到,this._validate执行于头里,this.trigger在后。也就是说要证明失败,那么就未会见尽change事件。

 

附set方法执行流程图

图片 6

 

将模型保存至服务器 – save

save方法会拿模型保存到服务器端,它的参数和set完全一致。内部调用set和sync方法。

以下几点需要留意

1.
默认会进行性校验,即options.validate为true,校验失败将不见面呈请后台程序,也非会见安装模型的this.attributes,直接回,见源码

if (attrs && !options.wait) {
  if (!this.set(attrs, options)) return false;
} else {
  if (!this._validate(attrs, options)) return false;
}
  1. 首蹩脚保存时(isNew),会动用create方式(HTTP
    post),已是的model则只需要update方式(HTTP put)

如下

var p1 = new Person()
p1.save({name: 'Backus', age: 87}) // create
p1.save({name: 'John'}) // update
  1. 得传success和error两单回调函数以处理保存成功与黄场景

    var p1 = new Person()
    p1.save({name: ‘Backus’, age: 87}, {

     success: function() {},
     error: function() {}
    

    })

4.
轩然大波,save成功后会见相继触发模型的“change”、“request”、“sync”事件。如果监听了这些事件,那么回调将赢得实施

 

由服务器获取模型 – fetch

起服务器端获取使用fetch方法,fetch方法很缺乏

fetch: function(options) {
  options = options ? _.clone(options) : {};
  if (options.parse === void 0) options.parse = true;
  var model = this;
  var success = options.success;
  options.success = function(resp) {
    if (!model.set(model.parse(resp, options), options)) return false;
    if (success) success(model, resp, options);
    model.trigger('sync', model, resp, options);
  };
  wrapError(this, options);
  return this.sync('read', this, options);
},
  1. 它使用read方式(HTTP get)

2.
央成功后调用set方法设置模型属性(this.attributes),设置失败则直接回不调用success,设置成就调用success,最后派发“sync”事件

 

型的风波 – change/invalid/sync

点就涉及的轩然大波 change、
invalid、sync。change事件还足以单独监听指定的性质,格式:”change:” +
attributeName。如下

var p1 = new Person()
p1.on('change:name', function(model, error) {
    console.log('name has changed')
})

控制台中分头安装下name和age

图片 7

足见见,只有设置name时才触发事件。

 

除开Backbone.Model自身提供的波,你还好给好之Model添加自定义的事件归因于满足需求。

 

鸟瞰图
  1. 内部状态,各属性影响的法子

图片 8

 

  1. 构造器执行流程

图片 9

 

 

相关文章