从基本视图自动扩展事件

时间:2011-10-12 22:05:34

标签: backbone.js

我有一个所有视图的基类,然后在应用程序的每个部分,如配置文件,我也有一个基类。这样,共享模板和属性可以在我的应用程序中在许多级别上使用。

我知道如果你在Backbone视图中创建一个函数而不是一个对象文字,它将为你实例化,但我不知道如何使用它对我有利。我的问题是,自动扩展在基本视图中创建的事件的最佳方法是什么。

我知道一种可能性,我在视图初始化时,获取基本事件类并将当前事件扩展到它,但它似乎有点hacky,我将不得不在每个视图上复制此代码。如果您知道更好的方式,请分享。

感谢。

3 个答案:

答案 0 :(得分:35)

var ParentView = Backbone.View.extend({
    'events': {
        'click .parent-something': "onParentSomethingClick"
    }
}); 

var ChildView = ParentView.extend({
    'events': _.extend({
        'click .something': 'onSomethingClick',
    }, ParentView.prototype.events)
});

它什么都不做,但这是迄今为止我见过的最简单的方式 我还用另一种方式创建了一个要点:https://gist.github.com/1271041

答案 1 :(得分:6)

以下是我在子视图中扩展父视图事件的方法:

var ParentView = Backbone.View.extend({

        events: {
            'click .link': 'onLinkClick'
        }
});

var ChildView = ParentView.extend({

        events: function(){
            return _.extend({
                'click .something': 'onSomethingClick',
            }, this.constructor.__super__.events);
        }
});

注意:这仅适用于Backbone 0.5.3。在该版本之前,您无法将事件定义为函数。

答案 2 :(得分:2)

我相信JohnnyO的答案是最好的。但是我遇到了另外两种方法,我将它们粘贴在这里。

遗憾的是,没有“自动”解决方案在每个新视图中都不需要额外的手写代码,但它就是它。

 ChildView = ParentView.extend({
     name: 'ChildView',
     events: {
     },
     constructor: function(){
        this.events = _.extend( {}, ParentView.prototype.events, this.events );
        console.debug( this.events );
        ParentView.prototype.constructor.apply( this, arguments );
     },
     someFunc: function(){
         console.debug('someFunc; this.name=%s', this.name);
     } 
 });

保罗 - backbone.js view inheritence. `this` resolution in parent

我不知道你可以在Backbone.view.extend中提供构造函数方法。很高兴知道。

 var GenericView = Backbone.View.extend({

   genericEvents: { 'click .close': 'close' },

   close: function() { console.log('closing view...'); }

 });

 var ImplView = GenericView.extend({

   events: { 'click .submit': 'submit' },

   initialize: function(options) {
     // done like this so that genericEvents don't overwrite any events
     // we've defined here (in case they share the same key)
     this.events = _.extend(this.genericEvents, this.events);
     this.delegateEvents()   
   } 
});

通过rulfzid - Sub Class a Backbone.View Sub Class & retain events

我已经设想(并且拒绝)这种方法,但是这个方法还有一个额外的转变,即调用你的基本事件,以便“genericEvents不会覆盖任何事件”,正如作者所说。除非他正在讨论你在两个事件对象中传递的两种事件,我不确定他在谈论什么,我只是使用 proto 或原型来引用父母事件。但再次,很高兴知道。