- Hello there, {{dstache}}first}} {{dstache}}last}}!
- {{lt}}/template>
-
- // in the JavaScript console
- > Template.hello({first: "Alyssa", last: "Hacker"});
- => "Hello there, Alyssa Hacker!
"
-
-This returns a string. To use the template along with the [`Live
-HTML`](#livehtml) system, and get DOM elements that update
-automatically in place, use [`Meteor.render`](#meteor_render):
-
- Meteor.render(function () {
- return Template.hello({first: "Alyssa", last: "Hacker"});
- })
- => automatically updating DOM elements
+When you app is loaded, it automatically renders the special template called
+``, which is written using the `` element instead of a
+``. You insert a template inside another template by using the
+`{{dstache}}> inclusion}}` operator.
The easiest way to get data into templates is by defining helper
functions in JavaScript. Just add the helper functions directly on the
-`Template.[template name]` object. For example, in this template:
+`Template.`*templateName* object. Putting it all together:
+
+
+
+ Today's weather!
+ {{dstache}}> forecast}}
+
+
+
+ It'll be {{dstache}}prediction}} tonight
+ {{lt}}/template>
+
+ // in client/myapp.js: reactive helper function
+ Template.forecast.prediction = function () {
+ return Session.get("weather");
+ };
+
+ // in the JavaScript console
+ > Session.set("weather", "cloudy");
+ > document.body.innerHTML
+ => "Today's weather!
It'll be cloudy tonight
"
+
+ > Session.set("weather", "cool and dry");
+ > document.body.innerHTML
+ => "Today's weather!
It'll be cool and dry tonight
"
+
+
+To iterate over an array or database cursor, use `{{dstache}}#each}}`:
+
+
{{dstache}}#each topScorers}}
{{dstache}}name}}
{{dstache}}/each}}
{{lt}}/template>
-instead of passing in `topScorers` as data when we call the
-template function, we could define a function on `Template.players`:
-
+ // in myapp.js
Template.players.topScorers = function () {
return Users.find({score: {$gt: 100}}, {sort: {score: -1}});
};
In this case, the data is coming from a database query. When the
-database cursor is passed to `#each`, it will wire up all of the
+database cursor is passed to `{{dstache}}#each}}`, it will wire up all of the
machinery to efficiently add and move DOM nodes as new results enter
the query.
Helpers can take arguments, and they receive the current template context data
in `this`. Note that some block helpers change the current context (notably
-`each` and `with`):
+`{{dstache}}#each}}` and `{{dstache}}#with}}`):
// in a JavaScript file
Template.players.leagueIs = function (league) {
@@ -576,14 +523,6 @@ in `this`. Note that some block helpers change the current context (notably
{{dstache}}/each}}
{{lt}}/template>
-{{#note}}
-Handlebars note: `{{dstache}}#if leagueIs "junior"}}` is
-allowed because of a Meteor extension that allows nesting a helper
-in a block helper. (Both `if` and `leagueIs` are
-technically helpers, and stock Handlebars would not invoke
-`leagueIs` here.)
-{{/note}}
-
Helpers can also be used to pass in constant data.
// Works fine with {{dstache}}#each sections}}
@@ -614,29 +553,8 @@ the data context of the element that triggered the event.
}
});
-Putting it all together, here's an example of how you can inject
-arbitrary data into your templates, and have them update automatically
-whenever that data changes. See [Live HTML](#livehtml) for further
-discussion.
-
-
-
- It'll be {{dstache}}prediction}} tonight
- {{lt}}/template>
-
-
- // JavaScript: reactive helper function
- Template.forecast.prediction = function () {
- return Session.get("weather");
- };
-
-
- > Session.set("weather", "cloudy");
- > document.body.appendChild(Meteor.render(Template.forecast));
- In DOM: It'll be cloudy tonight
-
- > Session.set("weather", "cool and dry");
- In DOM: It'll be cool and dry tonight
+For more details about Spacebars, read [the Spacebars
+README](https://github.com/meteor/meteor/blob/devel/packages/spacebars/README.md).
{{/markdown}}
diff --git a/docs/client/docs.js b/docs/client/docs.js
index 30b0023d3e..5d78f53055 100644
--- a/docs/client/docs.js
+++ b/docs/client/docs.js
@@ -101,8 +101,7 @@ var toc = [
"Structuring your app",
"Data and security",
"Reactivity",
- "Live HTML",
- "Templates",
+ "Live HTML templates",
"Using packages",
"Namespacing",
"Deploying",