Question

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

配置/木偶/ view.js

(function() {

    define([
        'backbone.marionette'
    ],

    function(Marionette){

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

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

        });

    });

}).call(this);

这允许我从我创建的任何视图中调用此方法，而无需为每个视图重新定义它。太好了！

这是一个精简的视图，事件对象仍然存在：

(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上的300ms点击事件延迟，当click事件触发某些元素时，我会手动触发tap事件。

现在，所有这些工作都很顺利，我觉得有必要对此进行详细描述，以便在上下文中给出答案。

我的问题是必须定义events对象。我完全不介意上面提到的那些元素.section-container p.title。但是，我想在每个视图中为所有 <a>标记注册一个点击事件。在我创建的每个视图中继续定义此事件是没有意义的

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

相反，要将其添加到每个视图，我想我只是将一个事件对象添加到 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对象。顺便说一下，当我的视图没有自己的事件对象时，tap a会起作用。

所以，我的问题是：如何向Marionette的Marionette.View基类型添加默认事件？

Answer 1

＆＃34;当然，这不起作用。每次我需要添加仅适用于该视图的事件时，都会覆盖事件对象。＆＃34;

是的，这似乎是问题所在。以下是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'
})

如果这只对一个全球＆＃39;事件是另一个问题。

或者你可以定义一个抽象的View类，它可以做类似的事情

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

并定义了quickClick方法，然后将此视图用于所有子视图。然后他们定义他们的活动，而不是在＆＃39;事件＆＃39;但在＆＃39; my_fancy_events＆＃39;。

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'属性。

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

2 个答案: