docs(core): make naming concrete

I think people new to promises, angular etc will find this example easier to understand with concrete identifiers from a simple use-case. The existing naming could be confused with promise/angular functionality (`promise` in the template, `resolved` etc).

Also I made `resolve` private, as then it's clear what we're exposing for the template.
This commit is contained in:
Tim Ruffles 2015-11-19 15:17:35 -08:00 committed by Jeremy Elbourn
parent b9b14dc731
commit bdfed9d850
1 changed files with 11 additions and 10 deletions

View File

@ -5,28 +5,29 @@ import {bootstrap} from 'angular2/bootstrap';
@Component({ @Component({
selector: 'async-example', selector: 'async-example',
template: `<div> template: `<div>
<p>Wait for it... {{promise | async}}</p> <p>Wait for it... {{ greeting | async }}</p>
<button (click)="clicked()">{{resolved ? 'Reset' : 'Resolve'}}</button> <button (click)="clicked()">{{ arrived ? 'Reset' : 'Resolve' }}</button>
</div>` </div>`
}) })
export class AsyncPipeExample { export class AsyncPipeExample {
resolved: boolean = false; greeting: Promise<string> = null;
promise: Promise<string> = null; arrived: boolean = false;
resolve: Function = null;
private resolve: Function = null;
constructor() { this.reset(); } constructor() { this.reset(); }
reset() { reset() {
this.resolved = false; this.arrived = false;
this.promise = new Promise<string>((resolve, reject) => { this.resolve = resolve; }); this.greeting = new Promise<string>((resolve, reject) => { this.resolve = resolve; });
} }
clicked() { clicked() {
if (this.resolved) { if (this.arrived) {
this.reset(); this.reset();
} else { } else {
this.resolve("resolved!"); this.resolve("hi there!");
this.resolved = true; this.arrived = true;
} }
} }
} }