This demo shows off the advanced features of Meteor's optional Spark-based templating system, including constant regions, node preservation, per-template state, and template lifecycle callbacks.
{{> preserveDemo }} {{> constantDemo }} {{> stateDemo }} {{> d3Demo }}Elements can be preserved, meaning that they will not be disturbed even as their attributes, children, or siblings change. In this example, when you press the X++ button, the CSS animation continues uninterrupted.
X={{x}}Parts of a template can be marked as constant, meaning that Meteor will leave the entire region alone (even as its siblings change.) This is great for embedding non-Meteor widgets. Try scrolling the two Google Maps embeds below. When you press X++, the maps stay where they are.
Try using the checkboxes to remove either or both of the maps. When you remove a map, Spark tracks the identity of the constant regions so that it knows which DOM nodes to keep and which DOM nodes to throw away. In the case of the Handlebars package, the identity is based on the actual template call stack that rendered the constant region.
X={{x}}
You can get a created callback when a template is initially rendered; a rendered when a template is placed on the screen and when any part of the template is redrawn; and a destroyed callback when a template is taken across the screen. All of these callbacks receive a common template state object in 'this' which allows you to attach data to each particular instance of a template.
In this case, created is used to create a new JavaScript timer that updates the text of a <span> element every second. rendered is used to find the <span> when it appears on the screen, and update the pointer when the <span> is redraw (say, when you press Y++ — since it is not marked to be preserved.) destroyed is used to cancel the timer when the template goes off the screen.
The template state is used to hold the current time count and a reference to the <span> object to update. That's why there can be multiple copies of the same template, each with a different value for the counter.
X={{x}}Meteor fits naturally with the popular d3.js data visualization library by Michael Bostock. Just set up d3 from your template's rendered callback. With Meteor, you can pass data directly out of a Mongo query into d3, and your d3 visualization will update in realtime, with no extra code! Try opening this page in two browser windows.
{{> circles left}} {{> circles right}}