Backbone 教程(五):View视图

视图类提供的方法非常简单,我们一般都会在 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是我两年多前入门前端的时候接触到的第一个框架,当初被backbone的强大功能所吸引(当...
    浙大javascript联盟阅读 4,858评论 0 5
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 14,194评论 4 61
  • 此篇文章主要介绍了MVC和MVVM的区别和关系;同时阐述了有关函数式的概念;解释了ReactiveCocoa的工作...
    MooGoo阅读 4,239评论 0 3
  • 走进校园,走向世界。见到许许多多不远千里来到矿大求学的国际友人,他们都说着同样的语言—中文,在他们接受中国文化...
    Pablo丶阅读 1,144评论 0 1
  • 记得曾经听过一首歌,歌里唱道:我想做一个无心人,忘掉爱,忘掉忧愁。好羡慕断线的风筝,永不关心飘落的地点。在这一个...
    知识共享普通阅读 2,976评论 0 0