javascript - 无法在 backbone.js 应用程序的绑定(bind)回调中访问 "this"

Question

所以这又是我的简单弹出模块。它可以分配给将触发弹出窗口的 View :

function(app) {

  var Popover = app.module();

  Popover.Views.Default = Backbone.View.extend({
    className: 'popover',
    initialize: function() {
      this.visible = true;
      this.render();
    },
    setReference: function(elm) {
      this.reference = elm;
      this.reference.bind('click', this.toggle);
    },
    beforeRender: function() {
      this.content = this.$el.find('.popover');
    },
    show: function() {
      //this.visible = true;
    },
    hide: function() {
      //this.visible = false;
    },
    toggle: function() {
      this.visible ? this.hide() : this.show();
    }
  });

  // Required, return the module for AMD compliance.
  return Popover;
});

这是我设置弹出窗口的方式:

Main.Views.Start = Backbone.View.extend({
    template: "main/start",
    serialize: function() {
      return { model: this.model };
    },        
    initialize: function() {
      this.listenTo(this.model, "change", this.render);
    },
    beforeRender: function(){
      this.popover = new Popover.Views.Default();
      this.insertView(this.popover);
    },
    afterRender: function() {
      this.popover.setReference(this.$el.find('.member'));
    }
});

我希望在单击 this.$el.find('.member') 时调用 popover 的切换功能。这很好用。但是在切换功能中，我无法从弹出对象访问“this”，而是“this”包含来自其父级的 html。所以我在切换功能中遇到错误:

TypeError: Object [object HTMLAnchorElement] has no method 'show' 

有什么想法可以访问切换回调中的实际弹出对象吗？

Answer 1

在 JavaScript 中，函数 为this 创建新的上下文。使用 jQuery，当您绑定(bind)事件时，jQuery 将 this 分配给当前元素。这就是你失去上下文的原因。那你能做什么？

首先，您可以手动分配 this 值:

this.reference.bind('click', _.bind(this.toggle, this));

其次，最好的方法是在Backbone View event对象中管理事件:

Backbone.View.extend({
  events: {
    "click element": "toggle"
  }
  // ...rest of your code...
});