Skip to content
This repository was archived by the owner on Dec 4, 2017. It is now read-only.

docs(template-syntax): clarify context discussions #996

Closed
wants to merge 1 commit into from
Closed
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 12 additions & 14 deletions public/docs/ts/latest/guide/template-syntax.jade
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Let’s find out what it takes to write a template for our view. We’ll cover these basic elements of template syntax.

# Table Of Contents
Let’s find out what it takes to write a template for our view. We’ll cover these basic elements of template syntax:

* [HTML](#html)
* [Interpolation](#interpolation)
Expand All @@ -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
Expand Down Expand Up @@ -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 can’t 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 can’t 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 can’t refer to <code>window</code> or <code>document</code>. They can’t 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 can’t refer to `window` or `document`. They can’t 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.
Expand Down Expand Up @@ -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 can’t 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 can’t directly call <code>print</code> or functions imported from <code>dart:math</code>.' : 'Template statements cannot refer to anything in the global namespace. They can’t refer to <code>window</code> or <code>document</code>. They can’t 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 can’t refer to `window` or `document`. They can’t 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.

Expand Down