diff --git a/docs/client/basic/sections/collections.md b/docs/client/basic/sections/collections.md index 1861561ea7..f3b19e4461 100644 --- a/docs/client/basic/sections/collections.md +++ b/docs/client/basic/sections/collections.md @@ -3,35 +3,37 @@
` tags: + +``` {{dstache}}#each people}}
{{dstache}}name}}
{{dstache}}/each}} +``` - +or use the "nametag" template from above instead of `` tags: + +``` {{dstache}}#each people}}
{{dstache}}> nametag}}
{{dstache}}/each}} ``` -You can find detailed documentation for Spacebars in the -[README on GitHub](https://github.com/meteor/meteor/blob/devel/packages/spacebars/README.md). - -{{> autoApiBox "Template#helpers"}} - -Each template has a local dictionary of helpers that it can use to inject data -into the HTML. Call `Template.myTemplate.helpers()` to add to this dictionary, -and use the data in your templates with `{{helperName}}`. - -For example, to show the logged in user's username: +Remember that helpers can be functions as well as simple values. For +example, to show the logged in user's username, you might define a +function-valued helper called `username`: ``` // in your JS file @@ -104,6 +116,9 @@ Template.profilePage.helpers({ }); ``` +Now, each time use the `username` helper, the helper function will be +called to determine the user's name: + ``` // in your HTML @@ -111,20 +126,26 @@ Template.profilePage.helpers({ ``` -The sections about `Session`, `Tracker`, `Collections`, and `Accounts` will talk -more about how to add dynamic data to your templates. - -You can also register a helper to be available in all templates by using +The helpers above have all been associated with specific templates, but +you can also make a helper available in all templates by using [`Template.registerHelper`](#template_registerhelper). +You can find detailed documentation for Spacebars in the +[README on GitHub](https://github.com/meteor/meteor/blob/devel/packages/spacebars/README.md). +Later in this documentation, the sections about `Session`, `Tracker`, +`Collections`, and `Accounts` will talk more about how to add dynamic data +to your templates. + + {{> autoApiBox "Template#events"}} -The event map passed into `Template.myTemplate.events` has event descriptors -as its keys and functions as the values. Event handlers get two arguments: -the event object and the template instance. +The event map passed into `Template.myTemplate.events` has event +descriptors as its keys and event handler functions as the values. Event +handlers get two arguments: the event object and the template instance. + +To attach event handlers to the following template ``` - ``` +you might call `Template.example.events` as follows: + ``` -// Adding events to a template Template.example.events({ "click .my-button": function (event, template) { alert("My button was clicked!"); @@ -147,34 +169,38 @@ Template.example.events({ }); ``` -The first part of the key is the name of the event being captured. Pretty much -any DOM event is supported. Some common ones are: `click`, `mousedown`, -`mouseup`, `mouseenter`, `mouseleave`, `keydown`, `keyup`, `keypress`, `focus`, -`blur`, and `change`. +The first part of the key (before the first space) is the name of the +event being captured. Pretty much any DOM event is supported. Some common +ones are: `click`, `mousedown`, `mouseup`, `mouseenter`, `mouseleave`, +`keydown`, `keyup`, `keypress`, `focus`, `blur`, and `change`. -The second part is a selector that indicates which elements to listen to. This -can be almost any selector +The second part of the key (after the first space) is a selector that +indicates which elements to listen to. This can be almost any selector [supported by JQuery](http://api.jquery.com/category/selectors/). -Whenever the indicated event happens on the selected element, the function -given in the event map will be called with the relevant DOM event and -template instance. See the [Event Maps section](#eventmaps) for details. +Whenever the indicated event happens on the selected element, the +corresponding event handler function will be called with the relevant DOM +event object and template instance. See the [Event Maps section](#eventmaps) +for details. {{> autoApiBox "Template#rendered"}} The function assigned to this property is called once for every instance of -Template.*myTemplate* when it is inserted into the document for the first time. +*Template.myTemplate* when it is inserted into the document for the first time. -The _rendered_ callback can be used to integrate external libraries that aren't +This _rendered_ callback can be used to integrate external libraries that aren't familiar with Meteor's automatic view rendering, and need to be initialized every time HTML is inserted into the page. Use the [`created`](http://docs.meteor.com/#template_created) and [`destroyed`](http://docs.meteor.com/#template_destroyed) callbacks to perform initialization or clean-up on any objects. +For example, to use the HighlightJS library to apply code highlighting to +all `` elements inside the `codeSample` template, you might assign
+the following function to `Template.codeSample.rendered`:
+
+
```
-// Apply code highlighting to elements inside when
-// the template is rendered (need to include HighlightJS)
Template.codeSample.rendered = function () {
hljs.highlightBlock(this.findAll('pre'));
};
@@ -182,9 +208,10 @@ Template.codeSample.rendered = function () {
In the callback function, `this` is bound to a [template
instance](#template_inst) object that is unique to this inclusion of the
-template and remains across re-renderings. You can use functions like
-[`this.findAll`](#template_findAll) to get DOM nodes in this template's rendered
-HTML.
+template and remains across re-renderings. You can use methods like
+[`this.find`](#template_find) and
+[`this.findAll`](#template_findAll) to access DOM nodes in the template's
+rendered HTML.
Template instances
@@ -195,12 +222,12 @@ that persist as the template is reactively updated.
Template instance objects can be found in several places:
1. The value of `this` in the `created`, `rendered`,
-and `destroyed` template callbacks
+ and `destroyed` template callbacks
2. The second argument to event handlers
3. As [`Template.instance()`](#template_instance) inside helpers
You can assign additional properties of your choice to the template instance to
-keep track any state relevant to the template. For example, when using the
+keep track of any state relevant to the template. For example, when using the
Google Maps API you could attach the `map` object to the current template
instance to be able to refer to it in helpers and event handlers. Use the
[`created`](#template_created) and [`destroyed`](#template_destroyed) callbacks
@@ -210,12 +237,14 @@ to perform initialization or clean-up.
`template.findAll` returns an array of DOM elements matching `selector`. You can
also use `template.$`, which works exactly like JQuery but only returns elements
-from this template.
+within `template`.
{{> autoApiBox "Blaze.TemplateInstance#find"}}
+
+
Get one DOM element matching `selector`, or `null` if there are no
such elements. Like `findAll`, `find` only returns elements from inside the
template.
-{{/template}}
\ No newline at end of file
+{{/template}}
diff --git a/docs/client/basic/sections/tracker.md b/docs/client/basic/sections/tracker.md
index 37d823de5a..7e377736a5 100644
--- a/docs/client/basic/sections/tracker.md
+++ b/docs/client/basic/sections/tracker.md
@@ -8,18 +8,18 @@ automatically rerun templates and other computations whenever
sources change.
Unlike most other systems, you don't have to manually declare these dependencies
-— it "just works". The mechanism is simple and efficient. Once you've
+— it "just works." The mechanism is simple and efficient. Once you've
initialized a computation with `Tracker.autorun`, whenever you call a function
-that supports reactive updates, Tracker automatically records that this data was
-accessed. Later, when the data changes, the computation is rerun automatically.
-This is how a template knows how to re-render whenever the data in its
-[helpers](#template_helpers) changes.
+that supports reactive updates, the `Tracker` automatically records which data were
+accessed. Later, when those data change, the computation is rerun automatically.
+This is how a template knows how to re-render whenever its [helper
+functions](#template_helpers) have new data to return.
{{> autoApiBox "Tracker.autorun" }}
-`Tracker.autorun` allows you to run a function that depends on reactive data
-sources, in such a way that if there are changes to the data later,
-the function will be rerun.
+`Tracker.autorun` allows you to run a function that depends on reactive
+data sources. Whenever those data sources are updated with new data, the
+function will be rerun.
For example, you can monitor one `Session` variable and set another:
@@ -31,30 +31,42 @@ Tracker.autorun(function () {
```
Or you can wait for a session variable to have a certain value, and do
-something the first time it does, calling `stop` on the computation to
-prevent further rerunning:
+something the first time it does. If you want to prevent further rerunning
+of the function, you can call `stop` on the computation object that is
+passed as the first parameter to the callback function:
```
-// This computation will wait for a session variable to become true,
-// then run exactly once.
+// For this example, assume shouldAlert starts out false
+Session.set("shouldAlert", false);
+
Tracker.autorun(function (computation) {
if (Session.get("shouldAlert")) {
computation.stop();
alert("Oh no!");
}
});
+
+// The autorun function runs but does not alert
+Session.set("shouldAlert", false);
+
+// The autorun function runs and alerts "Oh no!"
+Session.set("shouldAlert", true);
+
+// The autorun function no longer runs
+Session.set("shouldAlert", "maybe?");
```
-The function is invoked immediately, at which point it may alert and
-stop right away if `shouldAlert` is already true. If not, the
-function is run again when `shouldAlert` becomes true.
+The first time `Tracker.autorun` is called, the callback function is
+invoked immediately, at which point it would alert and stop right away if
+`shouldAlert` had been true. If not, the function is run again when
+`shouldAlert` becomes true.
If the initial run of an autorun throws an exception, the computation
is automatically stopped and won't be rerun.
To learn more about how Tracker works and to explore advanced ways to use it,
-visit the Tracker chapter in the
+visit the Tracker chapter in the
Meteor Manual, which describes it in
-complete detail.
+much more detail.
-{{/template}}
\ No newline at end of file
+{{/template}}