docs(toh-5/dart): make dashboard more robust (#1688)

Originally the dashboard TS expression ``heroes.slice(1, 5))` had been
written as:

> _heroService.getHeroes().getRange(1, 5)

which is brittle; it fails if there are not enough heroes. Slice
doesn't fail; an equivalent express
ion in Dart is

> _heroService.getHeroes().skip(1).take(4)

This is now used.

Other changes:
- Fix in css (missed TS-side update).
- Ran `dartfmt` on `heroes_component.dart`.
This commit is contained in:
Patrice Chalin 2016-06-28 13:15:29 -07:00 committed by Kathy Walrath
parent eda47f64e8
commit f8e6b5d1f7
6 changed files with 15 additions and 13 deletions

View File

@ -32,7 +32,7 @@ class DashboardComponent implements OnInit {
// #enddocregion ctor // #enddocregion ctor
Future<Null> ngOnInit() async { Future<Null> ngOnInit() async {
heroes = (await _heroService.getHeroes()).getRange(1, 5).toList(); heroes = (await _heroService.getHeroes()).skip(1).take(4).toList();
} }
// #docregion goto-detail // #docregion goto-detail

View File

@ -19,7 +19,7 @@ class DashboardComponent implements OnInit {
DashboardComponent(this._heroService); DashboardComponent(this._heroService);
Future<Null> ngOnInit() async { Future<Null> ngOnInit() async {
heroes = (await _heroService.getHeroes()).getRange(1, 5).toList(); heroes = (await _heroService.getHeroes()).skip(1).take(4).toList();
} }
gotoDetail() {/* not implemented yet */} gotoDetail() {/* not implemented yet */}

View File

@ -3,4 +3,4 @@ class Hero {
String name; String name;
Hero(this.id, this.name); Hero(this.id, this.name);
} }

View File

@ -1,6 +1,5 @@
// #docplaster // #docplaster
// #docregion // #docregion , v2
// #docregion v2
import 'dart:async'; import 'dart:async';
import 'dart:html'; import 'dart:html';

View File

@ -6,7 +6,7 @@
margin: 0 0 2em 0; margin: 0 0 2em 0;
list-style-type: none; list-style-type: none;
padding: 0; padding: 0;
width: 10em; width: 15em;
} }
.heroes li { .heroes li {
cursor: pointer; cursor: pointer;

View File

@ -14,10 +14,9 @@ import 'hero_service.dart';
selector: 'my-heroes', selector: 'my-heroes',
// #enddocregion heroes-component-renaming // #enddocregion heroes-component-renaming
templateUrl: 'heroes_component.html', templateUrl: 'heroes_component.html',
styleUrls: const ['heroes_component.css'], styleUrls: const ['heroes_component.css'],
directives: const [HeroDetailComponent] directives: const [HeroDetailComponent])
// #docregion heroes-component-renaming // #docregion heroes-component-renaming
)
// #enddocregion heroes-component-renaming, metadata // #enddocregion heroes-component-renaming, metadata
// #docregion class, heroes-component-renaming // #docregion class, heroes-component-renaming
class HeroesComponent implements OnInit { class HeroesComponent implements OnInit {
@ -37,9 +36,13 @@ class HeroesComponent implements OnInit {
getHeroes(); getHeroes();
} }
void onSelect(Hero hero) { selectedHero = hero; } void onSelect(Hero hero) {
selectedHero = hero;
}
Future<Null> gotoDetail() => Future<Null> gotoDetail() => _router.navigate([
_router.navigate(['HeroDetail', {'id': selectedHero.id.toString()}]); 'HeroDetail',
{'id': selectedHero.id.toString()}
]);
// #docregion heroes-component-renaming // #docregion heroes-component-renaming
} }