0

私はこのコードを持っています:

Template.temp.rendered = function () {
    console.log('temp rendered');
}

Web サイトが初期化されたときにのみログに記録されます。

しかし、私はこのようなことをします:

more = function () {
    Meteor.subscribe('Videos', Session.get('more_info'));
}

more(); を呼び出すと、テンプレート dom が新しいドキュメントで更新されても、「一時レンダリング」はログに記録されません。次のようなものも試しました：

Template.temp.rerendered = function () {
    console.log('temp re rendered');
}

それは動作しません; テンプレートが再レンダリングされたかどうかを知るにはどうすればよいですか?

とりあえずこんなことやってます 

$('#list').bind("DOMSubtreeModified",function(){
    console.log('template modified'}
    //this logs like 200 times, every time the template is re rendered
)

どうすれば流星のようにできますか？

リスト テンプレート:

<template name="list">
    {{#each list}}
        <a id="{{_id}}" href="/{{category}}/{{_id}}" title="{{vTitle}}">
            {{vTitle}}
        </a>
    {{/each}}
</template>

ヘルパー:

Template.list.helpers({
  list : function () {
     return Videos.find({},{sort : {date : -1}});
  }
})

試した（動作していない）：

Template.list.rendered = function () {    
  this.autorun(function() {
    Videos.find();
    console.log('template re rendered');
  });
}

推奨される解決策 (@richsilv から):

Template.list.rendered = function () {    
  this.autorun(function() {
    Videos.find().count();
    console.log('template re rendered');
  });
}

また、@Peppe LGのソリューションは、テンプレートがレンダリングされるたびに関数を呼び出す必要があり、自動実行を登録したくない場合に適しています。

4

2 に答える 2

2

はい、renderedコールバックは、テンプレートが最初にレンダリングされたときに1 回だけ起動されます。依存する計算が無効化されたために変更されたときではありません。

Meteoric の方法はthis.autorun、レンダリングされたコールバックに を追加することです。これは、テンプレートを再レンダリングさせているのと同じもの (つまりfind、Videosコレクションの など) に依存しています。そうすればあなたは：

  1. DOM ではなくデータ ソースに反応性を結び付けることは、概念的な観点からより賢明であることは別として、テンプレートに変更があるたびに不要な計算の負荷を実行しないことも意味します。複数のデータ ソースに依存しています (autorun必要に応じて、ソースごとに異なるものを使用できます)。
  2. autorun破棄されたときに宣言されているブロックを停止するテンプレートの機能をthis引き続き利用します。これにより、CPU とメモリを占有するフローティングの未使用の自動実行の負荷を回避するために、手動でブロックを停止する必要がなくなります。
于 2014-12-16T11:55:06.290 に答える
1

Blaze (Meteor 0.8.0) から、テンプレートが再レンダリングされることはありません。代わりに、きめの細かい更新が使用されます。テンプレートの一部がいつ変更されたかを知る必要がある場合は、その部分をさらに別のテンプレートに入れてみて、そのテンプレートのレンダリング機能を使用してください。たとえば、次のテンプレートがあるとします。

<template name="myTemplate">
    {{#if reactiveCondition}}
        <p>The reactive condition is true!</p>
    {{/if}}
</template>

そして、段落がレンダリングされたときに何かをしたい場合は、次のようにする必要があります。

<template name="myTemplate">
    {{#if reactiveCondition}}
        {{> paragraph}}
    {{/if}}
</template>

<template name="paragraph">
    <p>The reactive condition is true!</p>
</template>

Template.paragraph.rendered = function(){
    console.log("The paragraph rendered!")
}

カーソルにも同じ原則を適用できます。たとえば、次のテンプレートです。

<template name="myTemplate">
    {{#each getCursor}}
        <p>A document in the cursor!</p>
    {{/each}}
</template>

次のように記述する必要があります。

<template name="myTemplate">
    {{#each getCursor}}
        {{> document}}
    {{/each}}
</template>

<template name="document">
    <p>A document in the cursor!</p>
</template>

Template.document.rendered = function(){
    console.log("A document is rendered!")
}
于 2014-12-16T11:59:23.387 に答える