Meteorjs：如何知道模板是否被重新渲染？

Question

我有这个代码：

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

仅在网站初始化时记录。

但我会这样做：

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

当我调用 more();即使模板 dom 使用新文档更新，它也不会记录“临时渲染”。 还尝试了类似的东西：

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

它不起作用； 我如何知道 A 模板是否被重新渲染？

目前我正在做这样的事情

$('#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 L-G 的解决方案也很好。

Answer 1

是的，当模板最初呈现时，rendered 回调是 only fired once，而不是由于它所依赖的计算无效而更改时。

Meteoric 做事的方法是在渲染的回调中添加一个this.autorun，它依赖于导致模板重新渲染的同一件事（即Videos 集合上的find，或其他）。你就是这样：

1. 将您的反应性与数据源而非 DOM 联系起来，这除了从概念角度更明智之外，还意味着您不会在每次模板发生任何更改时都运行大量不必要的计算，即如果它依赖于多个数据源，则非常重要（如有必要，您可以为每个源设置不同的autorun）。
2. 仍然利用模板的能力来停止 autorun 块被拆除时在 this 下声明的块，这消除了手动停止它们以避免加载浮动、未使用的自动运行占用 CPU 和内存的需要.

Answer 2

从 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!")
}