docs(template-syntax): clarify context discussions

closes #996
This commit is contained in:
Kathy Walrath 2016-03-21 13:32:57 -07:00
parent ded7bb7c47
commit d02d098339
1 changed files with 12 additions and 14 deletions

View File

@ -6,9 +6,7 @@ include ../_util-fns
Many of us are familiar with the component/template duality from our experience with model-view-controller (MVC) or model-view-viewmodel (MVVM). In Angular, the component plays the part of the controller/viewmodel, and the template represents the view.
Lets find out what it takes to write a template for our view. Well cover these basic elements of template syntax.
# Table Of Contents
Lets find out what it takes to write a template for our view. Well cover these basic elements of template syntax:
* [HTML](#html)
* [Interpolation](#interpolation)
@ -30,13 +28,13 @@ include ../_util-fns
* [Input and output properties](#inputs-outputs)
* [Template expression operators](#expression-operators)
* [pipe](#pipe)
* ["elvis" (?.)](#elvis)
* ["elvis" (?.)](#elvis)
// #enddocregion intro
.l-sub-section
:marked
The [live example](/resources/live-examples/template-syntax/ts/plnkr.html)
The [live example](/resources/live-examples/template-syntax/ts/plnkr.html)
demonstrates all of the syntax and code snippets described in this chapter.
// #docregion html-1
.l-main-section
:marked
@ -130,13 +128,13 @@ include ../_util-fns
// #enddocregion template-expressions-2
// #docregion template-expressions-context
- var lang = current.path[1]
- var details = lang === 'dart' ? 'template expressions cant refer to static properties, nor to top-level variables or functions, such as <code>window</code> or <code>document</code> from <code>dart:html</code>. They cant directly call <code>print</code> or functions imported from <code>dart:math</code>. They are restricted to referencing members of the expression context.' : 'template expressions cannot refer to anything in the global namespace. They cant refer to <code>window</code> or <code>document</code>. They cant call <code>console.log</code> or <code>Math.max</code>. They are restricted to referencing members of the expression context.'
:marked
<a id="expression-context"></a>
### Expression context
Perhaps more surprising, template expressions cannot refer to anything in the global namespace.
They cant refer to `window` or `document`. They cant call `console.log` or `Math.max`.
They are restricted to referencing members of the expression context.
Perhaps more surprising, !{details}
The *expression context* is typically the **component instance**, which is
the source of binding values.
@ -241,14 +239,14 @@ include ../_util-fns
// #enddocregion template-statements-2
// #docregion template-statements-3
- var lang = current.path[1]
- var details = lang === 'dart' ? 'Template statements cant refer to static properties on the class, nor to top-level variables or functions, such as <code>window</code> or <code>document</code> from <code>dart:html</code>. They cant directly call <code>print</code> or functions imported from <code>dart:math</code>.' : 'Template statements cannot refer to anything in the global namespace. They cant refer to <code>window</code> or <code>document</code>. They cant call <code>console.log</code> or <code>Math.max</code>.'
:marked
### Statement context
As with expressions, statements cannot refer to anything in the global namespace.
They cant refer to `window` or `document`. They cant call `console.log` or `Math.max`.
Statements are restricted to referencing members of the statement context.
The statement context is typically the **component instance** to which we are binding an event.
As with expressions, statements can refer only to what's in the statement context — typically the
**component instance** to which we're binding the event.
!{details}
The *onSave* in `(click)="onSave()"` is sure to be a method of the data-bound component instance.