1

I have a simple popover module that can be added to another view. This popover should listen for clicks or mouseups outside of his own view.

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

My problem is that the hideOutsideCallback is fired 4 times when a click is performed. Why?

4

3 回答 3

0

你可以使用像 bootstrap modal 这样的背景。背景占据了网站的整个空间，当它被点击时，它会关闭模式。

于 2013-06-29T06:38:24.593 回答
0

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

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

_.bindAll(this, 'hideOutsideClick');
 $('html').on('click', this.hideOutsideClick);
于 2013-06-30T10:30:56.830 回答
0

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

第一种方式

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

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

第二种方法是：您创建 global 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();
}
于 2013-06-29T09:11:29.113 回答