Backbone.js，为什么多次触发此回调？

Question

我有一个简单的popover模块，可以将其添加到另一个视图中。 该弹出窗口应在其自己的视图之外侦听单击或鼠标悬停。

function(app) {
  var Popover = app.module();
  Popover.Views.Default = Backbone.View.extend({
    className: 'popover',
    initialize: function(options) {
      _.bindAll(this, 'hideOutsideClick');
      this.on('toggle', this.toggle);
      this.render();
    },
    afterRender: function() {
      //watch for clicks outside current view
      $('html').on('click', this.hideOutsideClick);
    },
    remove: function() {
      //cleanup
      this.hide(); 
      $('html').off('click', this.hideOutsideClick); this.$el.remove();
    },
    show: function() {
      this.visible = true; this.$el.show();     
    },
    hide: function() {
      this.$el.hide(); this.visible = false;
    },
    toggle: function() {
      this.visible ? this.hide() : this.show();
    },
    hideOutsideClick: function(event){
     //on any click this is fired 4 times!!!
    }
  });
  return Popover;
});

我的问题是，执行一次单击时将将hideOutsideCallback触发4次。 为什么？

Answer 1

您可以像引导模态一样使用背景。 背景会占用网站的整个空间，并且在单击时会关闭模式。

Answer 2

如果我完全理解您的问题，您可以这样做：

第一种方式

         --------
        |  view  |
         --------
             |
      --------------     
     |              |
 ----------      ----------
| subview1 |    | subview2 |
 ----------      ----------

内部视图和内部视图您可以编写（或初始化）子视图（subview1和subview2）以下的所有事件。

第二种方法是：创建全局object ，在view1的内部intialize您需要像这样绑定事件：

object.any_field.on('change', this.anyFunction())

在view2内部，您必须更改object.any_field

编辑

initialize: function(options) {
    this.off() 
    _.bindAll(this, 'hideOutsideClick');
    this.on('toggle', this.toggle);
    this.render();
}

Answer 3

我解决了大多数问题，并在此处提供了一个工作弹出框模块http://pastebin.com/HF5gSUKQ

要监听当前视图之外的点击：

_.bindAll(this, 'hideOutsideClick');
 $('html').on('click', this.hideOutsideClick);