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:
parent
b9b14dc731
commit
bdfed9d850
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue