Meteor.js：如何通过 Javascript 动态设置 div 高度

Posted 2023-03-08

【中文标题】Meteor.js：如何通过 Javascript 动态设置 div 高度

【英文标题】：Meteor.js: How to set a div height dynamically via Javascript

【发布时间】：2013-11-24 02:03:11

【问题描述】：

我正在使用模板/把手，但是当浏览器窗口调整大小时，没有任何事件处理程序被触发。不知道如何捕获调整大小事件以动态将 div 的高度设置在视口内

这是我迄今为止使用流星事件地图尝试过的示例：

Template.basic.events(
    'resize window' : function(evt, tmpl)
         alert("test");
     ,
;

理想情况下，每次调整窗口大小时都会调用此处理程序，因此我可以使用$(window).height() 使用tmpl.find('#main-div'); 在html 中设置div 的高度。

【参考方案1】：

大多数直接依赖 jQuery 的问题都可以使用 onRendered 回调来解决，如下所示：

Template.basic.onRendered(function() 
  $(window).resize(function() 
    console.log($(window).height());
  );
);

从技术上讲，这是可行的，但是因为 window 在渲染过程中永远不会被删除，所以这种技术有一个很大的缺点：它每次渲染模板时都会添加一个新的调整大小处理程序。

因为window 始终可用，您可以改用created 和destroyed 回调来注册和注销处理程序：

Template.basic.onCreated(function() 
  $(window).resize(function() 
    console.log($(window).height());
  );
);

Template.basic.onDestroyed(function() 
  $(window).off('resize');
);

但是请注意，在onDestroyed 中停止调整大小处理程序可能并不是您真正想要的。有关详细信息，请参阅this 问题。

还要注意，在当前版本的流星中，您可以像这样检查事件处理程序的数量：

$._data($(window).get(0), "events").resize.length