Hide inner view from outer view

How to use Backbone to hide an element when user clicks outside it.

by Matheus Santana

HTML

<script src="https://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"></script>
<script src="https://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script>
<div class="app">
  <div class="box">
  </div>
</div>

CSS

.app {
  background-color: #000;
  display: block;
  height: 200px;
  position: relative;
  width: 400px;
}

.box {
  background-color: #fff;
  display: block;
  height: 50px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 75px;
  width: 50px;
}

JavaScript

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