Window Resize Event For Backbone View

I am using Backbone view in javascript. I have created a backbone view as follows : var MaskView = Backbone.View.extend({ className: 'dropdown-mask', initialize: functi

Solution 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:

varMaskView = 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;
}