Backbone学习笔记4—各模块详解

个人觉得yujianshenbing的博客中关于backbone的系列文章写的都比较好,加上自己的理解,有了下面这篇文章。
在backbone中各模块是可以被继承的,可以轻松地进行重载和扩展。

1、Model
基类、核心,足以看到其重要性。
一般继承Model进行操作,而不直接实例化。即一般是var m = new Backbone.Model.extend()而非var m = new Backbone.Model();
在使用继承Model定义好一个模型类之后,使用new关键字进行实例化该模型的对象。
模型的属性事件常被使用。属性事件在当模型中对应属性的数据发生改变时被触发。命名规则是:change:属性名。属性事件触发时,会将当前模型以及最新数据作为参数传递给监听函数。事件在发生时先触发属性事件,再触发change事件。不管是属性事件还是change事件,事件被触发时,模型中的数据已被修改,此时用get或者escape方法获得的是模型中的最新数据。
可以与服务器无缝连接:通过调用save()、fetch()和destroy()方法可以让模型中的数据与服务器保持同步,但在此之前必须设置url或urlRoot属性。
每个模型对象都有一个唯一标识id,它与数据库中记录的id保持同步。id是从服务器接口进行同步获取到的。每个模型内部会自动创建一个cid,用来标识每一个模型。

2、View
绑定用户操作。利用delegate将用户事件与执行方法有序地组织起来。
使用events属性:

events:{
  "click #insert":'insert',
  "mouseleave .button":"change"
}

视图自动将表达式中的事件绑定到选择器元素上,当元素的事件被触发后,视图自动调用表达式中绑定的方法。
每个视图对象都对应一个DOM对象,视图中所有操作都限定在这个DOM对象之内。这样的好处是便于控制以及提高效率。
创建视图的两种方法:
a)DOM已经存在:

var views = Backbone.View.extend({el:'#ids'});
var view = new views();

b)DOM不存在:

var views = Backbone.View.extend({
   tagName:'p',
   className:'targe',
   id:'#ids',
   attributes:{title:'段落'}},
   render:function(){
      this.el.innerHTML="test";
      document.body.appendChild(this.el);
   }
});
var view = new views();
view.render()

先创建el,然后利用render函数把el添加到页面上

3、Events
backbone所有模块的基类,其他模块都继承了Events的方法。Events无法实例化.
注意Events的使用:如果一个事件绑定了多个监听函数,则触发时按照绑定顺序进行执行。而特殊事件“all”会在每次事件触发之后执行。

4、Collection
用于组织和管理多个模型。但它并不是必须的,如果某个模型对象是唯一的,那么没有必要放到集合中。
使用方法如下:

var person = Backbone.Model.extend({defaults:{name:''}});
var people = Backbone.Collection.extend({model:person});
var john = new person({name:"john"});
var rose = new person({name:"rose"});
var jack = new person({name:"jack"});
var personList = new people([john,rose,jack]);

本例中,定义了模型类person和集合类people,然后创建了3个模型对象,并将它们放到一个集合对象中。

5、Router和History
一般在单页面中应用。建议大家看博客Backbone入门指南(七):Router和History (路由控制器)

此条目发表在pri, 成长, 面试分类目录,贴了标签。将固定链接加入收藏夹。

发表评论

邮箱地址不会被公开。 必填项已用*标注