backbone(二)视图

1.视图 

1	var UserView = Backbone.View.extend({

2	initialize: function{/*.......*/},

3	render: function{/*.......*/}

4

});

01	//每个实例都知道当前的DOM元素或this.el

02	//el是由tageName,className,id等属性来创建的元素。

03	//如果没指定这些值，el是一个空div

04	var UserView = Backbone.View.extend({

05	tagName: "span",

06	className: "users"

07

});

08

09	assertEqual((new UserView).el.className,"users");

10

11	//指定el,直接将视图绑定到页面中已存在的元素上

12	var UserView = Backbone.View.extend({

13	el: $(".users")

14

});

15

16	//实例化一个试图时传递el,用tageName，className,id等来标记

17	var userView = new UserView({id: "followers"});

2.渲染视图  //使用新的HTML来更新el: 

01	var TodoView = Backbone.View.extend({

02	template: _.template($("#todo-template").html()),

03

04	render: function(){

05	$(this.el).html(this.template(this.model.toJSON()));

06	return this;

07

}

08

})

09

10	_.template("http://documentcloud.github.com/underscore/#template")是一款生成模版非常方便的工具

3.委托事件 //添加事件到el的简单快捷的方法 

01	var TodoView = Backbone.View.extend({

02

events: {

03	"change input[type=checkbox]" : "toggleDone",

04	"click .destroy" : "clear",

05

},

06

07	toggleDone: function(e){/* ... */},

08	clear: function(e){/* ... */}

09

});

10

11	//events对象为{"eventType selector": "callback"},selector可选，如果为空，事件直接绑定在el上

4.绑定和上下文 

 

01	//当模型变化时，会触发change事件，然后调用render重新渲染

02	var TodoView=Backbone.View.extend({

03	initialize: function(){

04	_.bindAll(this, 'render' ,'close'); //_.bindAll (http://documentcloud.github.com/undersocre/#bindAll)

05	this.model.bind('change' , this.render);

06

},

07

08	close: function(){/* ... */}

09

});

10

11	//_.bindAll 保证render()和close()函数总能在TodoView的实例上下文中执行

12

13	//模型销毁时，删除对应el。视图需要绑定模型的delete事件

14	var TodoView = Backbone.View.extend({

15	initialize: function(){

16	_.bindAll(this, 'render', 'remove');

17	this.model.bind('change', 'this.render');

18	this.model.bind('delete', 'this.remove');

19

},

20

21	remove: function(){

22	$(this.el).remove();

23

}

24

});