骨干视图的窗口大小调整事件

Question

我在javascript中使用Backbone视图.

我创建了一个骨干视图如下:

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

我想在视图中捕获窗口大小调整事件.

问题是,当窗口完全加载时,从上面的骨干视图创建掩码视图.现在,当我调整窗口大小时,蒙版仅覆盖部分窗口区域.我希望每次重新加载窗口时,掩码也会根据当前窗口大小动态更改其区域.

我如何实现这一目标？

Answer 1

Backbone依赖于jQuery(或zepto)进行DOM操作.jQuery的.resize()是你正在寻找的事件,所以你写的是这样的:

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

也就是说,我打赌你根本不需要使用JavaScript.任何理由都是为什么一个简单的旧CSS风格不会做的伎俩？像这样的东西:

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