我可以通过在 Dart 代码中使用 @observable 声明来使 String 或 num 类型可观察：
@observable
var x = '';
and {{ }}html 中的语法：
<div>x = {{x}}</div>
But @observable不适用于列表和地图。我如何使这些可观察到？
Use toObservable()以 List 或 Map 作为参数。这创建了一个
List 或 Map 对象与其在 UI 中的表示形式之间的绑定。
下面的例子使用toObservable()。请注意，列表和地图
对象每秒都会添加数据。和toObservable()创造
正确的绑定，这些对象的 UI 会自动更新以显示
添加的项目。
当列表或地图clear()编辑后，用户界面再次反映了这一点。
有关如何构建和运行此类脚本的说明，请参阅http://www.dartlang.org/articles/web-ui/tools.html http://www.dartlang.org/articles/web-ui/tools.html.
这里是main.dart file:
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;
});
}
这是随附的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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
