Backbone.View
constructor/initialize
当创建一个视图时,传递的参数结合视图的默认参数作为this.options给视图,以备以后的引用。有几个特殊的参数传参时会直接赋给视图:model,colle,el,id,className,tagName,attributes。如果视图View有定义initialize方法的话,initialize方法会在视图创建时就被调用。如果需要创建一个引用已经存在的DOM元素的视图View,那么可以把元素作为参数传递:new View({
el:existingElement
}).
eg:
var doc = documents.first();
new DocumentRow({
model:doc,
id:"document-row-"+doc.id
});
el
所有的视图都会有一个DOM元素(el属性),无论该元素是否插入到页面。这样的话,视图可以在任意时候被渲染,然后立即插入到DOM中,这样就能够以尽可能少的reflows和repaints达到高性能的UI渲染。如果有指定,this.el根据tagName, className, id and attributes属性创建。如果没有,el会是一个空的div。eg:
var ItemView = Backbone.View.extend({
tagName: 'li'
});
var BodyView = Backbone.View.extend({
el: 'body'
});
var item = new ItemView();
var body = new BodyView();
alert(item.el + ' ' + body.el);
$el
视图元素的缓存对象。更便捷的引用方式取代总是re-wrapping DOM元素 eg:
view.$el.show();
listView.$el.append(itemView.el);
setElement
如果需要将视图应用于别的DOM元素,使用setElement方法可以创建缓存引用$el,并将视图的委托事件一同"复制"。$(jQuery)
如果页面中引入了 jQuery ,每个视图都将拥有 $ 函数,可以在视图元素查询作用域内运行。 如果使用该作用域内的 jQuery 函数,就不需要从列表中指定的元素获取模型的 ids 这种查询了,我们可以更多的依赖 HTML class 属性。 它等价于运行:$(selector, this.el)。eg:
ui.Chapter = Backbone.View.extend({
serialize : function() {
return {
title: this.$(".title").text(),
start: this.$(".start-page").text(),
end: this.$(".end-page").text()
};
}
});
render
render默认无操作render 默认实现是没有操作的。 重载本函数可以实现从模型数据渲染视图模板,并可用新的 HTML 更新 this.el。 推荐的做法是在 render 函数的末尾 return this 以开启链式调用。
eg:
var Bookmark = Backbone.View.extend({
render: function() {
$(this.el).html(this.template(this.model.toJSON()));
return this;
}
});
Backbone 并不知道开发者使用何种模板引擎。 render 函数中可以采用拼字符串,或者利用 document.createElement 创建 DOM 树等等。 但还是建议选择一个好的 Javascript 模板引擎。 Mustache.js, Haml-js, 以及 Eco 都是很好的选择。 因为 Underscore.js 已经引入页面了, 所以如果倾向于简单的js风格模板的话,_.template 可以使用并是一个很好的选择。
无论基选择哪种模板,都永远不要在 Javascript 中拼接 HTML 字符串。
remove
用于移除DOM树中的一个视图,并调用stopListening来解除视图listenTo的所有绑定事件。delegateEvents(事件委托)
用 jQuery 的on函数来为视图内的 DOM 事件提供回调函数声明。如果未传入 events 对象,使用 this.events 作为事件源。 事件对象的书写格式为 {"event selector" : "callback"}。回调函数可以是是一个函数名,也可能是直接的函数体 。如果省略 selector ,那么事件就被绑定到视图的根元素(this.el)。 默认情况下,delegateEvents 会在视图的构造函数内被调用,因此如果有 events 对象,所有的 DOM 事件已经被连接, 并且我们永远不需要去手动调用本函数。events 属性也可以被定义成返回 events 对象的函数,这样让我们定义事件,以及实现事件的继承变得更加方便。
视图渲染时使用 delegateEvents 相比用 jQuery 向子元素绑定事件有更多优点。 所有注册的函数在传递给 jQuery 之前已被绑定到视图上,因此当回调函数执行时,this 仍将指向视图对象。 当 delegateEvents 再次运行,此时或许需要一个不同的 events 对象,所以所有回调函数将被移除,然后重新委托 — 这对模型不同行为也不同的视图挺有用处。
搜索结果页面显示文档的视图看起来类似这样:
var DocumentView = Backbone.View.extend({
events: {
"dblclick" : "open",
"click .icon.doc" : "select",
"contextmenu .icon.doc" : "showMenu",
"click .show_notes" : "toggleNotes",
"click .title .lock" : "editAccessLevel",
"mouseover .title .date" : "showTooltip"
},
render: function() {
this.$el.html(this.template(this.model.attributes));
return this;
},
open: function() {
window.open(this.model.get("viewer_url"));
},
select: function() {
this.model.set({selected: true});
},
...
});
undelegateEvents
Removes all of the view's delegated events. Useful if you want to disable or remove a view from the DOM temporarily.
用于移除视图的所有委托事件。如果需要使视图不可用或者移除都可以使用这个