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;
                    }
                });
  • 相关阅读:
    P5283 [十二省联考2019]异或粽子 可持久化字典树
    P3293 [SCOI2016]美味 最大异或值 主席树
    P4735 最大异或和 可持久化trie树
    P4551 最长异或路径 trie树
    html/css静态网页制作
    在一个div里,列表样式图片进行float,实现水平排序
    css的网页布局用position
    您右下角有份、、、
    登录注册页面和页面跳转
    相对路径 绝对路径
  • 原文地址:https://www.cnblogs.com/leamiko/p/2955506.html
Copyright © 2011-2022 走看看