mogę zrobić String lub rodzaj num zaobserwować za pomocą @observable oświadczenie w kodzie Dart:sporządzeniu mapy lub listy do zaobserwowania w interfejsie internetowym
@observable
var x = '';
i {{ }} składni w html:
<div>x = {{x}}</div>
Ale @observable nie działa z listami i mapami. Jak sprawić, by były one widoczne?
Użyj toObservable() z listą lub mapą jako argumentem. Tworzy to powiązanie między obiektem List lub Map a jego reprezentacją w interfejsie użytkownika.
W poniższym przykładzie użyto toObservable(). Zauważ, że obiekty Lista i Mapa mają dane dodawane co sekundę. Po poprawnym powiązaniu interfejsu użytkownika dla tych obiektów auto-magicznie aktualizuje się, aby pokazać dodane elementy.
Kiedy lista lub mapa są clear() ed, interfejs użytkownika ponownie odzwierciedla to.
Instrukcje dotyczące tworzenia i uruchamiania skryptu, takiego jak ten, można znaleźć na stronie http://www.dartlang.org/articles/web-ui/tools.html.
Oto plik main.dart:
import 'dart:async';
import 'package:web_ui/web_ui.dart';
@observable
num x = 0; // @observable works fine with a number.
List list = toObservable(new List());
Map<String, num> map = toObservable(new Map());
void main() {
new Timer.periodic(new Duration(seconds: 1), (_) {
x += 1;
list.add(x);
map[x.toString()] = x;
if (x % 4 == 0) {
list.clear();
map.clear();
}
return x;
});
}
A oto towarzyszący dart.html file:
<!DOCTYPE html>
<html>
<body>
<p>x = {{ x }}</p>
<ul>
<template iterate='item in list'>
<li>list item = {{item}}</li>
</template>
</ul>
<ul>
<template iterate='key in map.keys'>
<li>map key = {{key}}, map value = {{map[key]}}</li>
</template>
</ul>
<script type="application/dart" src="main.dart"></script>
</body>
</html>