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

Question

我正在使用templateshandlebars，但当浏览器窗口调整大小时，没有一个事件处理程序被触发。不知道如何捕捉resize事件，以便动态设置div的高度在视口内。

这是我目前使用meteor的事件图尝试的一个例子。

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

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

Answer 1

大多数直接依赖jQuery的问题，都可以通过使用 渲染时 这样回调。

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

但是，请注意，停止在 毁坏 可能不是你真正想要的。请看 这个 问题来了解更多细节。

另外需要注意的是，在当前版本的流星中，你可以这样检查事件处理程序的数量。

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