Meteorjs: How to know if template is re rendered?

Question

I have this code:

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

Which logs only when the website is initialized.

But i do something like this:

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

When i call more(); it does not log the "temp rendered" even though the template dom gets updated with the new documents. Also tried something like:

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

It does not work; How do I know if A template is rerendered ?

For the moment i'm doing something like this

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

How can I do it in the meteor way ?

list Template:

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

Helpers:

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

Tried(not working):

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

Prefered Solution(from @richsilv):

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

Also the solution from @Peppe L-G was good if you need to call a function every time the template is rendered and if you dont want to register an autorun.

Answer 1

Yes, the rendered callback is only fired once when the template is originally rendered, not when it changes due to computations on which it depends being invalidated.

The Meteoric way to do things is to add a this.autorun to the rendered callback which is dependent on the same thing that's causing the template to rerender (i.e. a find on the Videos collection, or whatever). That way you are:

1. Tying your reactivity to the data source rather than the DOM which, apart from being more sensible from a conceptual perspective, also means you don't run a load of unnecessary calculations every time there is any change to your template, which is very important if it is dependent on multiple data sources (you can have a different autorun for each source, where necessary).
2. Still taking advantage of a template's ability to stop autorun blocks which are declared under this when it's torn down, which obviates the need to stop them manually to avoid having loads of floating, unused autoruns taking up CPU and memory.

Answer 2

From Blaze (Meteor 0.8.0), templates are never re-rendered. Instead, fine grained updates are used. If you need to know when a part of the template changes, try putting that part in yet another template, and use the rendered function of that template. For example, if you have the following template:

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

And you want something to happen when the paragraph is rendered, you need to do something like this:

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

The same principle can be applied to cursors. For example, the following template:

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

Must be written as:

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