Question

所以这是我的简单弹出模块。它可以分配给一个将触发弹出窗口的视图：

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;
});

这就是我设置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的切换功能。这很好用。但是在切换功能中我无法从popover对象访问“this”，而是“this”包含来自其父级的html。所以我在切换功能中遇到错误：

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

如何在切换回调中访问actuall popover对象的任何想法？

Answer 1

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

首先，您可以手动分配此值：

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

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

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

Answer 2

您必须将该函数绑定到Backbone对象，例如在initialize方法中使用：

initialize: function() {
      this.visible = true;
      _.bindAll(this, 'toggle');
      this.render();
}

Answer 3

 this.reference.bind('click', this.toggle, this);  // 3rd param is a context

或

_.bindAll(this, "toggle");

......但第一个更好。

来自BackboneJS docs：

绑定“this”也许单个最常见的JavaScript“gotcha”就是   事实上，当你传递一个函数作为回调时，它的值就是这个   迷路了。使用Backbone，在处理事件和回调时，你会   经常发现依赖_.bind和_.bindAll是有用的   Underscore.js。

将回调绑定到Backbone事件时，您可以选择传递   可选的第三个参数指定将在此时使用的   稍后会调用回调。

无法在backbone.js app中的bind回调中访问“this”

3 个答案: