Meteor.js：如何通過 Javascript 動態設置 div 高度

Question

我正在使用模板/把手，但是當瀏覽器窗口調整大小時，沒有觸發任何事件處理程序。 不知道如何捕獲調整大小事件以動態設置 div 的高度在視口內

這是我迄今為止使用meteor的事件地圖嘗試過的示例：

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

理想情況下，每次調整窗口大小時都會調用此處理程序，因此我可以使用$(window).height()使用tmpl.find('#main-div');在 html 中設置 div 的高度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中停止調整大小處理程序可能並不是您真正想要的。 有關更多詳細信息，請參閱此問題。

另請注意，在當前版本的meteor 中，您可以像這樣檢查事件處理程序的數量：

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