Question

我可以使用Dart代码中的@observable声明创建一个String或num类型的observable：

@observable
var x = '';

html中的

和{{ }}语法：

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

但@observable不适用于列表和地图。我如何制作这些可观察的内容？

Answer 1

使用toObservable()将List或Map作为参数。这创造了一个 List或Map对象与UI中的表示之间的绑定。

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

当列表或地图clear()时，用户界面再次反映了这一点。

有关如何构建和运行此脚本的说明，请参阅 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>

在Web UI中使Map或List可观察

1 个答案: