如何当用户点击的div以外隐藏骨干一个div？(How to hide a div in Backb

我有一个骨干查看包含内部的div。我想，当用户点击的div以外隐藏DIV。

我不知道如何设置，上面写着“单击不可#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>和点击广告的处理程序绑定到这一点。你可以有一个看看jQuery的BlockUI插件来看看如何做到这一点。

Answer 2:

如果您使用的原型，你可以这样做：

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直接运作的，你可以让骨干手柄事情对你提出您的观点一些适当的结构。例如：

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.Events模块听内部视图内外部的意见点击事件，然后对其进行操作，如你所愿。

我也建议你检查出这个漂亮的文章与骨干工作时就常犯的错误。他们中有些人有密切的关系你的问题：