javascript - Backbone.js 切换弹出窗口

Question

可以插入到另一个 View 中的简单弹出 View 。在创建时它被引用到父 View 的 View 元素:

function(app) {

  var Popover = app.module();

  Popover.Views.Default = Backbone.View.extend({
    className: 'popover',
    initialize: function(options) {

      this.reference = options.reference;
      this.reference.bind('click', this.toggle());

      this.render();
    },
    beforeRender: function() {
      this.content = this.$el.find('.popover');
    }
    toggle: function() {
      console.log('toggle');
    }
  });

  // 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.popover = new Popover.Views.Default({
          reference: this.$el.find('.member')
      });
      this.listenTo(this.model, "change", this.render);
    },
    beforeRender: function(){
      this.insertView(this.popover);
    }
  });

弹出窗口显示正确，但是当我点击 a.member 时没有任何反应。此外，我注意到在页面刷新时触发了切换方法并且切换出现在日志中。很奇怪。为什么会发生这种情况的任何想法？如何将父 View 中的链接点击与弹出框的切换方法关联起来？

当我记录引用时:

[prevObject: jQuery.fn.jQuery.init[1], context: undefined, selector: ".member", jquery: "2.0.0", constructor: function…]context: undefinedlength: 0prevObject: jQuery.fn.jQuery.init[1]selector: ".member"__proto__: Object[0]

Answer 1

您没有将事件正确绑定(bind)到 reference，请尝试:

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

---

在您创建 popover 对象时 $el 不包含 .member 元素，您的日志显示了一个长度为等于 0。确保在创建 member 之后创建 popover，可能在 render 方法之后。