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

Posted 2023-03-06

【中文标题】主干视图的窗口调整大小事件

【英文标题】：window resize event for backbone view

【发布时间】：2013-07-26 14:44:43

【问题描述】：

我在 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())
        
      
    );

我想捕捉视图内窗口大小调整的事件。

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

我如何做到这一点？

【参考方案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;

【讨论】：

我不知道，有没有一种纯 CSS 方法可以仅在窗口具有一定大小时进行修复，然后让它滚动并更改内容大小以在最小时保持纵横比？

@FlavorScape 您可以通过在 CSS 中使用媒体查询来根据屏幕大小更改属性来实现这一点。查看this question的答案