javascript - Backbone View 的窗口调整事件

Question

我在 javascript 中使用 Backbone View 。

我创建了一个 Backbone View ，如下所示:

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

我想捕获 View 内窗口大小调整的事件。

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

我该如何实现？

Answer 1

Backbone 依靠 jQuery(或 zepto)进行 DOM 操作。 jQuery's .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;
}