主干视图窗口resize事件 [英] window resize event for backbone view

问题描述

我使用的JavaScript骨干视图。

I am using Backbone view in javascript.

我创建了一个骨干网观点如下：

I have created a backbone view as follows :

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

我要捕捉窗口视图中调整的事件。

i want to capture event of window resizing inside the view.

的问题是，当窗口被完全加载，并且掩模视图从上述主干视图创建。现在，当我调整窗口，面具只覆盖了部分窗口区域。
我想每一个被重载的窗口时间，面膜还可以根据动态当前窗口的大小改变它的区域。

The problem is that, when the window is completely loaded, and mask view is created from the above backbone view. Now when i resize the window, the mask only covers a partial window area. I want each time the window is reloaded, the mask also changes its area according to the current window size dynamically.

我如何做到这一点？

推荐答案

骨干依靠的jQuery（或仄）为DOM操作。 jQuery的.resize（）是你正在寻找的事件，所以你写的东西是这样的：

Backbone relies on jQuery (or zepto) for DOM manipulation. jQuery's .resize() is the event you're looking for, so you'd write something like this:

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样式不会做的伎俩？事情是这样的：

That said, I'd wager you don't need to use JavaScript for this at all. Any reason why a plain old CSS style wouldn't do the trick? Something like this:

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

这篇关于主干视图窗口resize事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！