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; } });