4

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

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

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

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

任何想法如何访问切换回调中的实际弹出框对象？

4

3 回答 3

4

在 JavaScriptfunctions中，为this. 而使用 jQuery，当你绑定一个事件时，jQuery 会分配this给当前元素。这就是为什么你失去了上下文。所以，你可以做什么？

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

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

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

Backbone.View.extend({
  events: {
    "click element": "toggle"
  }
  // ...rest of your code...
});
于 2013-06-28T14:53:15.947 回答
1

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

initialize: function() {
      this.visible = true;
      _.bindAll(this, 'toggle');
      this.render();
}
于 2013-06-28T14:51:04.680 回答
1 
 this.reference.bind('click', this.toggle, this);  // 3rd param is a context

或者

_.bindAll(this, "toggle");

...但第一个更好。

来自 BackboneJS 文档：

绑定“this” 也许最常见的 JavaScript“陷阱”是这样一个事实，即当您将函数作为回调传递时，它的 this 值会丢失。使用 Backbone，在处理事件和回调时，您通常会发现依赖 Underscore.js 中的 _.bind 和 _.bindAll 很有用。

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

于 2013-06-28T14:52:04.013 回答