3

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

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

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

我如何做到这一点？

4

1 回答 1

20

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;
}
于 2013-07-26T14:04:43.613 回答