视图类提供的方法非常简单,我们一般都会在 Backbone.View 的基础上进行扩展,但即使是特别复杂的视图类,它也应该仅仅是做界面事件、和渲染逻辑相关的操作,数据管理应该交由 Model 和 Collection 来完成,而业务逻辑应该由其它的类来完成。
// 定义和创建视图
var ListView = Backbone.View.extend({
tagName: 'div',
className: 'listview',
id: 'list',
attributes: {
title: '列表',
style: 'color:red'
},
render: function () {
this.el.innerHTML = 'Hello World!';
document.body.appendChild(this.el);
}
})
;
var listview = new ListView();
listview.render();
// 处理DOM事件
var MyView = Backbone.View.extend({
el: '#view',
// {"event selector": "callback"}
events: {
'click #create': 'createData',
'click #read': 'readData',
'click #update': 'updateData',
'click #delete': 'deleteData'
},
createData: function () {
alert(arguments.callee.name);
},
readData: function () {
alert(arguments.callee.name);
},
updateData: function () {
alert(arguments.callee.name);
},
deleteData: function () {
alert(arguments.callee.name);
}
});
var view = new MyView();