2012-06-23 19 views
22

私は流星がDOM要素の「クリック」などのイベントを公開していることを知っていますが、テンプレートや部分的な読み込み時に発生するロードイベントがあるのでしょうか?どうすればこれを達成できますか?meteor.jsのテンプレートonloadイベント

ありがとうございました。

答えて

42

流星の場合は、0.4.0のプレビューから、Template.myTemplate.createdを使用できます。

Template.myTemplate.createdでは、DOMはまだ準備ができていません。あなたがDOMを操作する必要がある場合は

、次のようなテンプレートオブジェクト内の状態を追跡する代わりにTemplate.myTemplate.renderedを使用して、ブール値を使用することがあります:

Template.myTemplate.rendered = function() { 
    if(!this._rendered) { 
     this._rendered = true; 
     console.log('Template onLoad'); 
    } 
} 
+3

Meteor 1.0.4以降、 'Template.myTemplate.rendered'は非推奨です。下位互換性のためにはまだサポートされていますが、新しいバージョンでは 'Template.myTemplate.onRendered'を使用することをお勧めします。 [ソース](https://github.com/meteor/meteor/blob/devel/History.md#blaze-2) – Iwazaru

11

次は動作するはずです。
テンプレートがDOMに追加されてレンダリングされるとMeteor.deferが呼び出されます。

<template name="temp"> 
    //regular stuff 
    {{invokeAfterLoad}} 
</template> 

Template.temp.invokeAfterLoad = function() { 
    Meteor.defer(function() { 
    $('mydiv').jquerify(); 
    }); 
    return ""; 
}; 
+1

非常に巧妙なトリックを!ありがとう、@ナチケット。 – Gezim

+3

v1.1.0.2以降、このパターンは推奨されていません。代わりに 'Template.temp.helpers(...)'を使用してください。 – 10basetom

4

私は、むしろ受け入れ答えよりもわずかに少ない総IMHOこれをお勧めします:

<template name="temp"> 
    {{aReactiveHelper}} 
</template> 

Template.temp.aReactiveHelper = function() { 
    var someValue = Session.get('someValue'); 
    invokeAfterLoad(); 
    return someValue; 
}; 

var invokeAfterLoad = function() { 
    Meteor.defer(function() { 
    $('mydiv').doSomething(); 
    }); 
}; 

仮定は、それが反応物に反応しているため、テンプレートをロードした後に何かを呼び出したいということです。

ここでの利点は、テンプレートにアニメーションコードを追加していないことです。

+1

これは実質的に同じ答えですNachiketの – Octopus

関連する問題