javascript - meteor .js : How to set a div height dynamically via Javascript

Question

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

这是我迄今为止使用 meteor 事件 map 尝试过的示例:

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

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

Answer 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更多细节的问题。

另请注意，在当前版本的 meteor 中，您可以像这样检查事件处理程序的数量:

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