Question

我使用jQuery和lodash来构建界面，并且我使用了委托事件，如下所示：

function Interface() {
  this.connectEvents();
  _.bindAll(this);
};
_.extend(Interface.prototype, {
  connectEvents : function() {
    this.$clockNav.on('click', '.navprev a', this.previousTime);
  },
  previousTime : function() {
    this.getPreviousTime(this.currentTime);
  }
});

但是，即使我使用_.bindAll将previousTime绑定到我控制的Interface对象的实例上，jQuery也会覆盖该绑定，而是设置this成为我点击的元素。如何阻止jQuery执行此操作并保留this的正确值？

Answer 1

你可以使用$.proxy()将自定义上下文传递给事件处理程序回调

Interface.prototype.connectEvents = function() {
  this.$clockNav.on('click', '.navprev a', $.proxy(this.previousTime, this));
};

Answer 2

使用jQuery.proxy或Function.prototype.bind原生方法。

Interface.prototype.connectEvents = function() {
  this.$clockNav.on('click', '.navprev a', $.proxy(this.previousTime, this));
};

OR

Interface.prototype.connectEvents = function() {
  this.$clockNav.on('click', '.navprev a', this.previousTime.bind(this));
};

Answer 3

问题证明比我想象的要简单得多：在我的初始化函数中，我在connectEvents之前调用_.bindAll。 D'哦。

Answer 4

有多种方法可以做到这一点。另一种尚未提及的技术是在闭包中使用局部变量：

_.extend(Interface.prototype, {
  connectEvents : function() {
    var self = this;
    this.$clockNav.on('click', '.navprev a', function() {self.previousTime()});
  },
  previousTime : function() {
    var self = this;
    this.getPreviousTime(function() {self.currentTime()});
  }
});

使用jQuery.on时保持上下文

4 个答案: