Evénement de redimensionnement de la fenêtre pour la vue principale

J’utilise la vue Backbone en javascript.

J’ai créé une vue dorsale comme suit:

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

Je veux capturer un événement de redimensionnement de la fenêtre dans la vue.

Le problème est que, lorsque la fenêtre est complètement chargée, et que la vue masque est créée à partir de la vue dorsale ci-dessus. Maintenant, lorsque je redimensionne la fenêtre, le masque ne couvre qu’une zone partielle de la fenêtre. Je souhaite que chaque fois que la fenêtre est rechargée, le masque modifie également sa zone de manière dynamic en fonction de la taille de la fenêtre actuelle.

Comment puis-je y parvenir?

Backbone s’appuie sur jQuery (ou zepto ) pour la manipulation du DOM. .resize () de jQuery est l’événement que vous recherchez, vous pouvez donc écrire quelque chose comme ceci:

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

Cela dit, je parie que vous n’avez pas du tout besoin d’utiliser JavaScript pour cela. Une raison pour laquelle un vieux style CSS ne ferait pas l’affaire? Quelque chose comme ça:

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