8

我可以通过在 Dart 代码中使用 @observable 声明来使 String 或 num 类型可观察：

@observable
var x = '';

和{{ }}html 中的语法：

<div>x = {{x}}</div>

但@observable不适用于列表和地图。我如何使那些可观察的？

4

1 回答 1

16

与ListtoObservable()或 Map 一起用作参数。这会在 List 或 Map 对象及其在 UI 中的表示之间创建一个绑定。

以下示例使用toObservable(). 请注意，List 和 Map 对象每秒都会添加数据。通过toObservable()创建正确的绑定，这些对象的 UI 会自动更新以显示添加的项目。

当 List 或 Map 被clear()编辑时，UI 再次反映了这一点。

有关如何构建和运行诸如此脚本的说明，请参阅 http://www.dartlang.org/articles/web-ui/tools.html。

这是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;
   });
}

这是随附的dart.html文件：

<!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>
于 2013-04-04T14:39:40.920 回答