3

テンプレート/ハンドルバーを使用していますが、ブラウザー ウィンドウのサイズが変更されたときにイベント ハンドラーがトリガーされません。div の高さをビューポート内に動的に設定するためにサイズ変更イベントをキャプチャする方法がわからない

これは、流星のイベント マップを使用してこれまでに試したことのサンプルです。

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

理想的には、このハンドラーは、ウィンドウのサイズが変更されるたびに呼び出されるため、.html を使用$(window).height()して div の高さを設定するために使用できます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でサイズ変更ハンドラーを停止することは、実際には望んでいない場合があることに注意してください。詳細については、この質問を参照してください。

また、現在のバージョンの meteor では、次のようにイベント ハンドラーの数を確認できます。

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