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.

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.

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.

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;

    }

);