Backbone.View（视图）
视图的核心是处理数据业务逻辑、绑定DOM元素事件、渲染模型或者集合数据。
添加DOM元素
render view.render() render 默认实现是没有操作的。 重载本函数可以实现从模型数据渲染视图模板，并可用新的 HTML 更新 this.el。 推荐的做法是在 render 函数的末尾 return this 以开启链式调用。
var testview = Backbone.View.extend({
id: 'show',
render: function (content) {
//this.el.innerHTML = content;
//document.body.appendChild(this.el);
this.$el.html(content).appendTo($('body'));
}
});
var test = new testview();
test.render("hello world!");
访问模型对象
var Book = Backbone.Model.extend({
defaults:{
title: 'backbone',
author: 'Jeremy Ashkenas'
}
});
var book = new Book({title:'ios',author:'apple'});
var BookView = Backbone.View.extend({
id: 'show',
render: function(){
this.$el.html(JSON.stringify(this.model)).appendTo($('body'));
}
});
var bookview = new BookView({model: book});
bookview.render();
访问集合对象
var booklist = [
{title:'ios',author:'apple'},
{title:'android',author:'google'},
{title:'Windows Phone',author:'microsoft'}
];
var books = new Backbone.Collection(booklist); var BookView = Backbone.View.extend({
id: 'show',
render: function(){
var html = '';
_.each(this.collection.models,function(book){
html += JSON.stringify(book)+'
';
});
this.$el.html(html).appendTo($('body'));
}
});
var bookview = new BookView({collection: books});
bookview.render();
使用模板
template view.template([data]) 虽然模板化的视图 不是Backbone直接提供的一个功能， 它往往是一个在视图定义template函数很好的约定。
<script type="text/template" id="templateID">
<%= code > ? '及格' : '不及格' %>
</script>
var ksView = Backbone.View.extend({
id: 'show',
initialize: function(){
this.template = _.template( $('#templateID').html() );
this.$el.appendTo($('body'));
},
render: function(num){
this.$el.html( this.template({code: num}) );
}
});
var ksview = new ksView();
ksview.render(50);
<script type="text/template" id="template">
<ol>
<li>系统：<%=system %></li>
<li>公司：<%=company %></li>
</ol>
</script>
var System = Backbone.Model.extend({
defaults: {
'system': '',
'company': ''
}
});
var system = new System({
'system': 'ios',
'company': 'apple'
});
var systemView = Backbone.View.extend({
id: 'show',
initialize: function(){
this.template = _.template( $('#template').html() );
this.$el.appendTo($('body'));
},
render: function(){
this.$el.html( this.template(this.model.toJSON()) );
}
});
var view = new systemView({model: system});
view.render();
//自定义模板格式
_.templateSettings = {
interpolate: /\{\{(.+?)\}\}/g
};
var template = _.template("Hello {{ name }}!");
console.log( template({name: "Backbone"}) ); _.templateSettings = {
interpolate: /\$(.+?)\$/g
};
var template = _.template("Hello $name$!");
console.log( template({name: "Backbone"}) );
绑定事件
var View = Backbone.View.extend({
el: '#view',
initialize: function(){
this.render();
},
render: function(){
this.$el.html('这是一个绑定视图事件的容器').appendTo($('body'));
},
events: {
'click': 'alertHello',
},
alertHello: function () {
alert('hello world!');
}
});
var view = new View();
<script type="text/template" id="templateFile">
<input type="button" id="btn" value="<%= name %>" />
<div id="box" style="display:none;"><%= message %></div>
</script>
var View = Backbone.View.extend({
id: 'view',
initialize: function(){
this.template = _.template( $('#templateFile').html() );
this.$el.appendTo($('body'));
this.render();
},
render: function(){
this.$el.html( this.template({
name: '点击我试试',
message: '哇，你把我挖出来了'
}) );
},
events: {
'click #btn': 'toggle'
},
toggle: function(){
$('#box').slideToggle();
}
});
var view = new View();
delegateEvents delegateEvents([events]) 采用 jQuery 的on函数来为视图内的 DOM 事件提供回调函数声明。 如果未传入 events对象，使用 this.events 作为事件源。 事件对象的书写格式为 {"event selector": "callback"}。 省略 selector 则事件被绑定到视图的根元素（this.el）。 默认情况下，delegateEvents 会在视图的构造函数内被调用，因此如果有 events 对象，所有的 DOM 事件已经被连接， 并且我们永远不需要去手动调用本函数。
undelegateEvents undelegateEvents() 删除视图所有委托事件。如果要从临时的DOM中禁用或删除视图时，比较有用。
<script type="text/template" id="templateFile">
<input type="button" id="btn1" value="点我触发事件" />
<input type="button" id="btn2" value="点我删除绑定事件" />
<input type="button" id="btn3" value="点我重新绑定事件" />
<div id="box" style="display: block;">哇，你好棒啊!</div>
</script>
var View = Backbone.View.extend({
id: 'view',
initialize: function(){
this.template = _.template( $('#templateFile').html() );
this.$el.appendTo($('body'));
this.render();
},
render: function(){
this.$el.html( this.template() );
},
events: {
'click #btn1': 'toggle',
'click #btn2': 'unbindEvent'
},
toggle: function(){
$('#box').slideToggle();
},
bindEvent: function(){
this.delegateEvents( this.events );
},
unbindEvent: function(){
this.undelegateEvents();
}
});
var view = new View();
$('#btn3').on('click', function() {
view.bindEvent();
});