美文网首页
Backbone 教程(五):View视图

Backbone 教程(五):View视图

作者: bigggge | 来源:发表于2016-11-11 16:08 被阅读43次

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

    相关文章

      网友评论

          本文标题:Backbone 教程(五):View视图

          本文链接:https://www.haomeiwen.com/subject/zzefpttx.html