jquery - 由于某种原因，我的 Backbone Cocktail.js mixin 事件被覆盖

Question

我的混音

window.MyMixins = {}

MyMixins.GlobalViewMethods =

  events:
    'click #skipit' : 'skipit'

我的观点

Maestra.Views.Questions ||= {}

class Maestra.Views.Questions.Prereq extends Backbone.View
  @mixin MyMixins.GlobalViewMethods

  template: JST["backbone/templates/questions/prereq"]

  events:
    "click #stepone"                        : "open_stepone"
    "click #steptwo"                        : "open_steptwo"
    "click #stepthree"                      : "open_stepthree"
    "click #stepone, #steptwo, #stepthree"  : "add_complete"    
    "click #iamstupidready"                 : "check_question"  

当我运行这个时，我的 mixin 事件不起作用。但是，如果我从 View 中删除所有事件，那么 mixin 事件就会起作用。否则，所有其他事件都会起作用，并且 View 的事件始终会覆盖 Mixin 的事件。其他一切都很好(渲染函数、构造方法等)

我的语法不正确吗？为什么这不允许我混合事件？

Answer 1

问题是当@mixin运行时:

@mixin MyMixins.GlobalViewMethods

类中没有事件，因此不会进行合并。然后，您点击事件:

events:
  "click #stepone"                        : "open_stepone"
  #...

并且 CoffeeScript 将覆盖 @mixin 添加的事件(请记住，@mixin 知道合并，而 CoffeeScript 不知道)。如果我们看一个简化的例子，你应该明白发生了什么；这个 CoffeeScript :

class V extends Backbone.View
  @mixin MyMixins.GlobalViewMethods
  events:
    "click #in_v" : "in_v"      

变成这个 JavaScript(删除了一堆嘈杂的样板文件):

V = (function(_super) {
  //...
  function V() {
    _ref = V.__super__.constructor.apply(this, arguments);
    return _ref;
  }

  V.mixin(MyMixins.GlobalViewMethods);

  V.prototype.events = {
    "click #in_v": "in_v"
  };

  return V;

})(Backbone.View);

现在您可以看到 @mixin (V.mixin) 运行并将一些 事件 合并到不存在的 V 中.prototype.events，然后 V.prototype.events 被 V 中的 events 覆盖。

如何解决订购问题？好吧，您只需将 @mixin 调用放在底部即可调整顺序:

class V extends Backbone.View
  events:
    "click #in_v" : "in_v"
  @mixin MyMixins.GlobalViewMethods

现在@mixin将看到V中的事件并进行一些合并。

演示:http://jsfiddle.net/ambiguous/2f9hV/1/