dart web 组件不刷新 UI 上的列表答案

【问题标题】：dart web component don't refresh a List on UIdart web 组件不刷新 UI 上的列表
【发布时间】：2013-04-03 00:01:04
【问题描述】：

我正在尝试创建一个简单的 Web 组件，其目的是显示消息几秒钟然后消失。我已经显示了前两个字符串，但是当我调用通知方法时没有任何反应：

<element name="x-informador" constructor="InformadorComponente" extens="div">
      <template>
        <ul>
          <template iterate="mensaje in mensajes">
            <li>{{mensaje}}</li>
          </template>
        </ul>
      </template>
      <script type="application/dart">

import 'dart:async';
import 'package:web_ui/web_ui.dart';
import 'package:web_ui/watcher.dart' as watcher;

class InformadorComponente extends WebComponent {

  @observable
  List mensajes = ['uno', 'dos'];

  const int DURACION_MENSAJE = 7;

  void informar(String informe) {
    mensajes.add(informe);
    watcher.dispatch();

    print('antes del Timer: ');
    print(mensajes);

    new Timer(new Duration(seconds: DURACION_MENSAJE), () {
      mensajes.removeAt(0);
      watcher.dispatch();

      print('paso del mensajes, first');
      print(mensajes);
    });
  }
}
      </script>
    </element>

我可以在浏览器上正确看到所有这些打印，但列表保持不变，没有任何反应。当我更改该列表的字符串并在调用通知方法时分配值时，UI 会刷新，但是当我使用此列表时，什么都没有。

浏览器没有显示任何错误，我正在从外部调用informar，从层次结构上的一个网络组件开始。

有什么提示吗？

【问题讨论】：

标签： dart dart-webui

【解决方案1】：

看看Making a Map or a List observable in Web UI。

基本上，您希望使用新的（到目前为止，大部分未记录）toObservable() 函数来使列表可观察。 Observables 正在取代 watcher.dispatch() 作为观察对象变化的首选方式。

【讨论】：