window resize event for backbone view

Question

I am using Backbone view in javascript.

I have created a backbone view as follows :

var MaskView = Backbone.View.extend({
      className: "dropdown-mask",
      initialize: function(){

      },
      onClick: function(e){

      },
      hide: function(){

      },
      makeCSS: function(){
        return {
          width  : Math.max(document.documentElement.scrollWidth,  $(window).width()),
          height : Math.max(document.documentElement.scrollHeight, $(window).height())
        }
      }
    });

i want to capture event of window resizing inside the view.

The problem is that, when the window is completely loaded, and mask view is created from the above backbone view. Now when i resize the window, the mask only covers a partial window area. I want each time the window is reloaded, the mask also changes its area according to the current window size dynamically.

How do i achieve that?

Answer 1

Backbone relies on jQuery (or zepto) for DOM manipulation. jQuery's .resize() is the event you're looking for, so you'd write something like this:

var MaskView = Backbone.View.extend({
    initialize: function() {
        $(window).on("resize", this.updateCSS);
    },

    updateCSS: function() {
        this.$el.css(this.makeCSS());
    },

    remove: function() {
        $(window).off("resize", this.updateCSS);
        Backbone.View.prototype.remove.apply(this, arguments);
    }
});

That said, I'd wager you don't need to use JavaScript for this at all. Any reason why a plain old CSS style wouldn't do the trick? Something like this:

.dropdown-mask {
    width: 100%;
    height: 100%;
    position: fixed;
}