Reactive behavior in Meteor template

Question

Could someone clarify how Meteor (Handlebars) templates interact with reactive sources? There is already a lot in the documentation but a more systematic explanation would help.

For instance, it seems the following does not trigger a template re-draw when the Session variable is changed

Template.foo.rendered = function () {
    var selectedItem = Session.get('item_selected');
    ... do stuff ...
}

I don't understand why the Template.rendered event does not react to reactive source changes. I would also like to understand if other events/methods exhibit this special behavior.

Tarang Tarang · Accepted Answer · 2013-04-21T13:00:14

The template will re-render when you set the item_selected value with

Session.set("item_selected","value");

This Session hash, beside the name has a reactive dependency similar to Deps.depends. When you change this Session hash the current reactive context will be invalidated and everything will be redrawn/re-rendered (which is called via Session.set).

The .rendered method will then be run where you can use this new value like you do with var selectedItem

For a very detailed videocast on how exactly it works you can have a look at the videos on EventedMind which demonstrate how Session is built and how to make another variable reactive.

Reactive behavior in Meteor template

1 Answers