Backbone 教程(五):View视图

2016-11-11  本文已影响43人  bigggge

视图类提供的方法非常简单,我们一般都会在 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();
上一篇下一篇

猜你喜欢

热点阅读