title: How do I add a resize event to the window in a view using Backbone?
body: <p>I have been trying to attach a handler to the resize event in one of my Backbone views. After doing some research I have discovered that you can only attach events to the view's element or its descendants.</p>
  <p>This is an issue for me because the visual effect I am trying to achieve is not possible using pure CSS and requires some JS to set the dimensions of the content area element based on the window minus the header element.</p>
  <p>If you are having trouble visualizing what I am trying to do, imagine a thin header and a content area which must occupy the remaining space with no CSS background trickery.</p>
  <pre><code>define(
      [
          'jQuery',
          'Underscore',
          'Backbone',
          'Mustache',
          'text!src/common/resource/html/base.html'
      ],
      function ($, _, Backbone, Mustache, baseTemplate) {
          var BaseView = Backbone.View.extend({
  
              el: $('body'),
  
              events: {
                  'resize window': 'resize'
              },
  
              render: function () {
                  var data = {};
  
                  var render = Mustache.render(baseTemplate, data);
  
                  this.$el.html(render);
  
                  this.resize();
              },
  
              resize: function () {
                  var windowHeight = $(window).height();
  
                  var headerHeight = this.$el.find('#header').height();
  
                  this.$el.find('#application').height( windowHeight - headerHeight );
              }
          });
  
          return new BaseView;
      }
  );
  </code></pre>