Backbone.VIew 学习笔记
Backbone.VIew
它不影响任何的HTML或CSS代码，并且可以任意javascript模板引擎兼容。
将界面组织到逻辑视图，之后是模型，当模型数据发生改变，视图立刻自动更新，这一切都不需要重绘页面。
不必钻进JSON对象中，查找 DOM元素，手动更新HTML,可以绑定视图的render函数到模型的change事件
创建自定义的视图类。通常我们需要重载render 函数,声明事件,通过tagName,className或id为视图指定根元素
var DocumentRow = Backbone.View.extend({
tagName: "li",
className:"document-row",
events:{
"click .icon": "open",
"click .button.edit": "openEditDialog",
"click .button.delete": "destory"
},
render:function(){
}
});
constructor/initialize new View
每次实例化一个视图时，传入的选项参数会被注册到this.options中以备后用。
model,collection el id className tagName 视图实例化时该函数立即执行。如果不希望创建一个指向DOM
var doc = Documents.first();
new DocumentRow({
model: doc,
id: "document-row-" + doc.id
});
el view.el
所有视图都拥有一个DOM元素(el属性)，不管元素在不在页面中，可以在任何时候渲染，然后一次性插入DOM中去，这样能尽量减少reflows和repaints从而获得高性能的UI渲染。 this.el 可以从视图的tagName,className,以及id属性创建，如果不都未指定，为一个div.
如果已存在，直接设置为真实的DOM元素或css选择字符串
view.$
每个视图都将拥有$函数，可以在视图元素查询作用域内运行. 等价于运行$(selector,this.el)
ui.Chapter = Backbone.View.extend({
serialize: function(){
return {
title: this.$(".title").text()
}
}
});
render view.render
重新渲染视图模板。使用新的html更新this.el
var Bookmark = Backbone.View.extend({
render: function(){
$(this.el).html(this.template(this.model.toJSON()));
return this;
}
});
无论基于什么时候考虑，都永远不要在Javascript中拼接HTML字符串
remove view.remove()
从DOM中移除视图 $(view.el).remove();
make view.make(tagName,[attribute],[content])
借助给定的元素类型，经及可选的attributes和HTML内容创建DOM元素。通常用于内部创建初始
var view = new Backbone.View;
var el = view.mak("b",{className:"bold"},"Bold!");
$('#make-demo').append(el);
delegateEvents delegateEvents([events])
采用jQuery的delegate函数来为视图内的DOM事件提供回调函数声明。如果未传入events对象，使用this.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.toJSON()));
return this;
},
open: function() {
window.open(this.model.get("viewer_url"));
},
select: function() {
this.model.set({selected: true});
},
...
});
Utility Functions
oConflictvar backbone = Backbone.noConflict();
返回 Backbone 对象的原始值。通常用于在第三方网站上引入了多个 Backbone 文件，避免冲突。
var localBackbone = Backbone.noConflict(); var model = localBackbone.Model.extend(...);
