javascript - 主干事件不适用于 object.function

Question

我正在尝试通过对象委托(delegate)我的事件。但是该事件不会触发，如果我直接引用它(“click .formations div”:this.movement.leaveCell)它将抛出一个JS错误

events: {
    "click .formations div":"enterCell", //option A
    "click .save ":"movement.leaveCell", //option B
    "click .save ":function(ev){this.movement.leaveCell(ev, this);}, //option C currently works
},
enterCell: function(ev){
    $(ev.currentTarget).addClass('highlight');
},
movement: {
    leaveCell: function(ev){
        $(ev.currentTarget).removeClass('highlight');
    }
},

如何让选项 B 发挥作用？

Answer 1

从 Backbone 的源代码中，您可以看到负责事件委托(delegate) delagateEvents 的方法

delegateEvents: function(events) {
      if (!(events || (events = _.result(this, 'events')))) return this;
      this.undelegateEvents();
      for (var key in events) {
        var method = events[key];
        if (!_.isFunction(method)) method = this[events[key]];
        if (!method) continue;

        var match = key.match(delegateEventSplitter);
        var eventName = match[1], selector = match[2];
        method = _.bind(method, this);
        eventName += '.delegateEvents' + this.cid;
        if (selector === '') {
          this.$el.on(eventName, method);
        } else {
          this.$el.on(eventName, selector, method);
        }
      }
      return this;
    },

从这里您可以看到 delegateEvents() 的 native 实现不会处理您的情况。它将尝试搜索不正确的 movement.leaveCell。

如果你想强制 Backbone.View 按照你的方式去做，你应该重写这个方法。

<小时/>

更新

Here是一个简单的工作 fiddle ，带有重写的 delegateEvents 方法。

Backbone.View.prototype.delegateEvents = function(events) {
      if (!(events || (events = _.result(this, 'events')))) return this;
      this.undelegateEvents();
      for (var key in events) {
        var method = events[key];
          if (!_.isFunction(method)) {
          var behaviors = method.split('.');
              if(behaviors.length > 1) {
                  method = this[behaviors[0]][behaviors[1]];
              } else {
                  method = this[events[key]];
              }

          }
        if (!method) continue;

        var match = key.match(/^(\S+)\s*(.*)$/);
        var eventName = match[1], selector = match[2];
        method = _.bind(method, this);
        eventName += '.delegateEvents' + this.cid;
        if (selector === '') {
          this.$el.on(eventName, method);
        } else {
          this.$el.on(eventName, selector, method);
        }
      }
      return this;
    };

此示例适用于一层深度的对象，但不再适用。

我会推荐你​​看看Marionette.js和 Marionette.Behaviors ，它也旨在分离 View 及其行为。