ich einen String oder ein num Typ beobachtbaren unter Verwendung der @observable Erklärung im Dart-Code machen kann:eine Karte oder eine Liste beobachtbaren in Web-UI zu machen
@observable
var x = '';
und {{ }} Syntax im html:
<div>x = {{x}}</div>
Aber @observable funktioniert nicht mit Listen und Karten. Wie mache ich das Observable?
Verwenden Sie toObservable() mit der Liste oder Karte als Argument. Dadurch wird eine Bindung zwischen dem List- oder Map-Objekt und seiner Darstellung in der Benutzeroberfläche erstellt.
Im folgenden Beispiel wird toObservable() verwendet. Beachten Sie, dass den Objekten List und Map Daten jede Sekunde hinzugefügt werden. Mit toObservable() erstellen die ordnungsgemäße Bindung, aktualisiert die Benutzeroberfläche für diese Objekte automatisch magische die hinzugefügten Elemente.
Wenn die Liste oder Karte clear() ed ist, spiegelt die Benutzeroberfläche dies wieder.
Anweisungen zum Erstellen und Ausführen eines Skripts wie diesem finden Sie unter http://www.dartlang.org/articles/web-ui/tools.html. Hier
ist die main.dart Datei:
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;
});
}
Und hier ist die begleitende dart.html Datei:
<!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>