4

我在 Backbone 中有一个包含内部 div 的视图。当用户在 div 之外单击时，我想隐藏 div。

我不确定如何在视图中设置一个事件，显示“单击 NOT #inner_div”：“removeDiv”。

关于如何做到这一点的任何建议？

4

3 回答 3

3

通常的方法是直接附加一个点击处理程序<body>，然后关闭或隐藏你的<div>. 例如：

render: function() {
    $('body').on('click', this.remove);
    this.$el.html('<div id="d"></div>');
    return this;
},
remove: function() {
    $('body').off('click', this.remove);
    // This is what the default `remove` does.
    this.$el.remove();
    return this;
}

如果您只想隐藏<div>而不是删除它，只需将点击绑定到与;<body>不同的方法即可。remove您仍然希望从中删除点击处理程序<body>。remove此外，您需要捕获视图上的点击事件，el以防止它们到达<body>.

演示：http: //jsfiddle.net/ambiguous/R698h/

如果您有其他关心点击事件的元素，那么您绝对可以定位 a<div>来掩盖它<body>，然后将您的点击处理程序绑定到它。您可以查看jQuery BlockUI插件以了解这是如何完成的。

于 2012-10-20T02:24:52.157 回答
0

如果你使用 Prototype，你可以这样做：

initialize: function() {
  // some code
  document.on('click', function(e, target) {
    if (target !== this.el && target.up('#inner_div').length === 0) {
      this.remove();
    }
  }.bind(this));
}

我猜想使用 jQuery 它可能看起来像这样：

initialize: function() {
  // some code
  $(document).on('click', function(e) {
    if (e.target !== this.el && e.target.parent('#inner_div').length === 0) {
      this.remove();
    }
  }.bind(this));
}
于 2012-10-23T06:43:38.700 回答
0

尽管直接操作 DOM 是可行的，但您可以通过为您的视图提供一些适当的结构来让 Backbone 为您处理事情。例如：

BoxView = Backbone.View.extend({
  events: {
    'click': '_click'
  },

  _click: function() {
    return false;
  }
});

AppView = Backbone.View.extend({
  el: '.app',

  initialize: function() {
    this.boxView = new BoxView({ el: $('.box') })
  },

  events: {
    'click': '_click'
  },

  _click: function() {
    this.boxView.remove();
  }
});

new AppView({ el: $('.app') });

这样，一旦触发了外部视图的点击，我们就可以更改内部视图。注意 BoxViewclick事件的绑定，以防止在用户单击它时释放它。

演示：https ://jsfiddle.net/embs/45da2ppm/

如果您已经有一个复杂的 Backbone 视图结构，并且无法轻松地重构为子视图结构，您仍然可以使用Backbone.Events 模块在内部视图中侦听外部视图的点击事件，然后根据需要对其进行操作。

我还建议查看这篇关于使用 Backbone 时常见错误的好文章。其中一些与您的问题密切相关：

于 2017-02-24T14:06:36.573 回答