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的率先个参数为1个对象,它将变成模型实例的性子。第三个参数将改成类属性(类静态属性、方法)。那在 Backbone的写类格局
有所提及。

 

模型与性子 – set/get

行使set和get方法来安装或获得模型的习性。属性在模型实例上有贰个专门的属性来存款和储蓄:this.attributes,set/get都围绕this.attributes操作。

Ajax 1

Ajax,设置模型Person的性质

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

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

Ajax 2

set方法除了能够承受对象情势参数,也能够承受前八个key,value格局。

Ajax 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})

从控制台输入如下

Ajax 4

能够看来输出了提醒消息“name 必须是字符串类型”,再打字与印刷出p1的JSON格式

Ajax 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方法执行流程图

Ajax 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

Ajax 7

可以观察,唯有设置name时才触发事件。

 

除外Backbone.Model自己提供的风浪,你还足以给自个儿的Model添加自定义的事件以满意必要。

 

鸟瞰图
  1. 中间景色,各属性影响的艺术

Ajax 8

 

  1. 构造器执行流程

Ajax 9

 

 

相关文章