View模块-LMLPHPView模块-LMLPHP

View模块-LMLPHP

View模块-LMLPHP

View模块-LMLPHP
View模块-LMLPHP
View模块-LMLPHP
一、应用场景
通过View的类注释,可知,Backbone.view是一个JS构造函数,与DOM中的某一块UI相对应,通过注册模型层数据的监听,可实现视图的自动渲染。
Backbone.View模块也扩展了Events模块,所以,View实例也继承了事件:on、trigger等。但是我们在实际应用中通常是多个view实例共享一个model实例,多个view实例充当观察者的角色,监听model的数据变化,驱动界面的刷新。很少会为view实例绑定自定义事件。
View模块-LMLPHP
View模块-LMLPHP
二、构造函数。
构造函数主要完成以下工作:
(1)、为每一个view实例对象创建属性实例cid,唯一标识该对象。
(2)、调用_configure方法扩展view实例对象的属性
View模块-LMLPHP
View模块-LMLPHP
(3)、调用_ensureElement方法为实例对象创建实例属性:el、$el 分别表示:dom对象与jquery对象
View模块-LMLPHP
View模块-LMLPHP
(4)、调用你自定义的initialize方法,所以创建View实例对象与创建Mode实例对象一样,自定义的initialize方法无需手动调用,框架会自动调用帮你完成初始化工作。
(5)、调用delegateEvents方法,绑定你扩展的的事件。
View模块-LMLPHP
View模块-LMLPHP
 
三、代码示例
View模块-LMLPHP
View模块-LMLPHP
M139.View.ViewBase 继承了Backbone.View
我调用extend方法扩展M139.View.ViewBase
我扩展的这些属性将会添加到ColumnList实例对象的原型上。同时,由于我的扩展对象包含属性el,events,initialize方法,当我new一个ColumnList实例时,框架会帮我做以下事情:
(1)、在实例对象上创建属性el、$el
(2)、调用jquery的on方法绑定指定事件
(3)、调用initialize方法执行初始化操作
执行以下代码:
View模块-LMLPHP
View模块-LMLPHP
打印结果为:
View模块-LMLPHP
View模块-LMLPHP
并且,我的扩展对象上的所有属性都被添加到实例对象的原型上了,所有实例共享。
05-21 19:56