Backbone.js toggle a popover

Backbone.js toggle a popover

本文关键字：popover toggle js Backbone      更新时间：2023-09-26

可以插入到另一个视图中的简单popover视图。在创建时，它被引用到父视图的视图元素：

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

引用是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时，什么也没发生。此外，我注意到在页面刷新时触发了toggle方法，toggle出现在日志中。非常沉闷。你知道为什么会这样吗？如何将父视图中的链接单击与popover的切换方法连接起来？

当我记录参考：

[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]

您没有将事件正确绑定到reference，请尝试使用：

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

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

相关文章：