zoukankan      html  css  js  c++  java
  • backbone event inherit

    View Code
    var Base = Backbone.View.extend({
                    initialize: function () {
                        this._hello = "hello world!!";
                        console.log('Base::initialize');
                    },
                    events: {
                        'click .j-inherit-click': 'inheritClick',
                        'click .j-inherit-click2': 'inheritClick2'
                    },
                    inheritClick: function (event) {
                        event.preventDefault();
                        console.log('Base::inheritClick');
                    },
                    inheritClick2: function (event) {
                        event.preventDefault();
                        console.log('Base::inheritClick');
                    },
                    template: $('#sidebar').html(),
                    render: function () {
                        this.$el.html(this.template);
                        return this;
                    },
                    promptColor: function () {
                        var cssColor = prompt("Please enter a css color");
                        this.set({color: cssColor});
                    }
                });
    
                var Sidebar = Base.extend({
                    initialize: function () {
                       // Base.prototype.initialize.apply(this, arguments);
                        this.constructor.__super__.initialize.apply(this, arguments);
                        console.log('Sidebar::initialize');
    
    // 继承方式1
    //                    var obj = {
    //                        'click .j-inherit-click': 'inheritClick'
    //                    };
    //                    this.events = $.extend({}, Base.prototype.events, obj);
                    },
    
    //                events: {
    //                    'click .j-inherit-click': 'inheritClick'
    //                },
    
    // 继承方式2
    //                events: function () {
    //                    var obj = {
    //                        'click .j-inherit-click': 'inheritClick'
    //                    };
    //                    var obj2 = $.extend({}, Base.prototype.events, obj);
    //                    return obj2;
    //                },
    
    // 继承方式3 推荐这种
                    events: function () {
                        var obj = {
                            'click .j-inherit-click': 'inheritClick'
                        };
                        var obj2 = $.extend({}, this.constructor.__super__.events, obj);
                        return obj2;
                    },
    
                    inheritClick: function (event) {
                        event.preventDefault();
                        console.log('Sidebar::inheritClick');
                    },
    
                    inheritClick2: function (event) {
                        event.preventDefault();
                        console.log('Sidebar::inheritClick2 override Base::inheritClick2');
                    },
    
                    template: $('#sidebar2').html(),
    
                    render: function () {
                        this.$el.html(this.template);
                        return this;
                    }
                });
  • 相关阅读:
    如何用正确的方法写出高质量软件的75条体会(转)
    使用javascript动态添加onclick事件,
    签名和重载
    C#文件后缀名详解
    配置SQL Server 2005 Express的身份验证方式,以及如何启用sa登录名。
    CSS选择符及优先级计算
    关于软件版本的解释
    数据结构形象解释
    CSS属性选择符
    [转载]Repeater三层嵌套
  • 原文地址:https://www.cnblogs.com/leamiko/p/2955506.html
Copyright © 2011-2022 走看看