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

你可以使用类似bootstrap模式的背景。背景消耗了网站的整个空间，当它被点击时，它会关闭模式。

Answer 2

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

第一种方式

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

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

第二种方式是：您创建全局object，在view1的intialize内需要绑定事件，如下所示：

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

和内部视图2您必须更改object.any_field

修改

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

Answer 3

我解决了大多数问题，并在http://pastebin.com/HF5gSUKQ

提供了一个有效的popover模块

要收听当前视图之外的点击次数：

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

Backbone.js，为什么这个回调多次被触发？

3 个答案: