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

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

1 个答案: