3

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

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

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

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

4

1 回答 1

9

大多数直接依赖 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中停止调整大小处理程序可能并不是您真正想要的。有关更多详细信息，请参阅此问题。

另请注意，在当前版本的流星中，您可以检查事件处理程序的数量，如下所示：

$._data($(window).get(0), "events").resize.length
于 2013-11-12T04:45:12.203 回答