Question

我在Backbone中有一个包含内部div的视图。我希望在用户点击div之外时隐藏div。

我不确定如何在View中设置一个“点击NOT #inner_div”的事件：“removeDiv”。

有关如何执行此操作的任何建议吗？

Answer 1

通常的方法是将点击处理程序直接附加到<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/

如果您有其他关注点击事件的元素，那么您绝对可以定位<div>来掩盖<body>，然后将您的点击处理程序绑定到该{{1}}。您可以查看jQuery BlockUI插件，了解如何完成此操作。

Answer 2

如果你使用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));
}

Answer 3

虽然直接操作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') });

这样我们可以在触发外部视图点击后更改内部视图。请注意BoxView click事件的绑定，以防止在用户点击它时将其处理掉。

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

如果您已经有一个复杂的Backbone视图结构，无法轻松地重构为子视图结构，您仍然可以使用Backbone.Events module来收听外部视图＆＃39;单击内部视图中的事件，然后根据需要进行操作。

我还建议您在使用Backbone时查看常见错误article。其中一些与您的问题密切相关：

当用户点击div之外时，如何在Backbone中隐藏div？

3 个答案: