如何将默认事件添加到Marionette的Marionette.View基类型？

Question

我目前正在用名为Marionette.View的方法扩展Marionette的基本quickClick类型。我这么做是为了

config/marionette/view.js

(function() {

    define([
        'backbone.marionette'
    ],

    function(Marionette){

        return _.extend(Backbone.Marionette.View.prototype, {

            quickClick: function(e) {
                $(e.target).get(0).click();
            }

        });

    });

}).call(this);

这允许我从我创建的任何视图调用该方法，而不必对每个视图重新定义它。太棒了！

下面是一个修剪后的视图，其中events对象仍然存在：

(function() {

    define([
        'backbone.marionette',
        'app',
        'templates'
    ],
    function(Marionette, App, templates){

        // Define our Sub Module under App
        var List = App.module("SomeApp");

        List.Lessons = Backbone.Marionette.ItemView.extend({

            events: {
                'tap .section-container p.title':         'quickClick'
            }

        });

        // Return the module
        return List;

    });

}).call(this);

如果您想知道，tap是我从Hammer.js使用的一个事件，因为这是一个移动应用程序。因此，为了避免iOS和Android上300 to的单击事件延迟，当click事件在某些元素上触发时，我将手动触发tap事件。

现在，所有这些都很好，我觉得有必要详细描述一下，这样就可以给出一个上下文的答案。

我的问题是必须定义events对象。我根本不介意像上面这样的特定元素，.section-container p.title。但是，我想在每个视图中为all <a>标记注册一个tap事件。在我创建的每个视图中继续定义这个事件是没有意义的

events: {
    'tap .section-container p.title':         'quickClick',
    // I don't want to add this to every single view manually
    'tap a': 'quickClick'
}

相反，我认为应该将一个events对象添加到config/marionette/view.js文件中，将一个方法添加到Marionette.View原型中，而不是将其添加到每个视图中。

以下是我所做的

(function() {

    define([
        'backbone.marionette'
    ],

    function(Marionette){

        return _.extend(Backbone.Marionette.View.prototype, {

            events: {
                'tap a': 'quickClick'
            },

            quickClick: function(e) {
                $(e.target).get(0).click();
            }

        });

    });

}).call(this);

当然，这不管用。每次需要添加仅适用于该视图的事件时，events对象都会被重写。顺便说一句，当我的视图没有自己的events对象时，tap a确实可以工作。

因此，我的问题是:如何将默认事件添加到Marionette的Marionette.View基类型中？

Answer 1

“当然，这是行不通的。每次我需要添加只适用于该视图的事件时，events对象都会被重写。”

是的，这似乎就是问题所在。下面是Marionette中执行事件委托的部分：

// internal method to delegate DOM events and triggers 
_delegateDOMEvents: function(events){
    events = events || this.events;
    if (_.isFunction(events)){ events = events.call(this); }

    var combinedEvents = {};
    var triggers = this.configureTriggers();
    _.extend(combinedEvents, events, triggers);

    Backbone.View.prototype.delegateEvents.call(this, combinedEvents);
  },

一个可能的解决方案可能是覆盖这个(私有的！)这是Marionette的一部分--但它可能会在新版本的Marionette中发生变化，而且您必须始终确保事情仍然有效。所以这很糟糕。

但是你可以在你的子视图中做这样的事情。

events: _.extend(this.prototype.events, {
  'tap .section-container p.title': 'quickClick'
})

如果这只对一个“全球”事件有意义的话，那就是另一个问题了。

或者您可以定义一个抽象视图类，它可以这样做

events: _.extend({'tap a': 'quickClick'}, this.my_fancy_events)

还定义了quickClick方法，然后将此视图用于所有子视图。然后，他们定义他们的事件不是在‘事件’，而是在‘我的幻想_事件’。

Answer 2

在扩展视图时，当我需要在“初始化”中添加一些额外的调用，以及扩展“events”属性以包括一些新的调用时，我偶尔会发现自己处于这种情况。在我抽象的观点中，我有一个函数：

inheritInit: function(args) { 
  this.constructor.__super__.initialize.apply(this, args);
  this.events = _.extend(this.constructor.__super__.events, this.eventsafter);
},

然后，在扩展视图中，我可以调用

initialize: function(options) {
  this.inheritInit(arguments)
  //..some extra declarations...
}

此外，我还可以定期使用'events‘属性。