3

我正在尝试创建一个简单的 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，从层次结构上的一个Web组件。

有什么提示吗？

4

1 回答 1

4

Have a look at Making a Map or a List observable in Web UI.

Basically, you want to use the new (and so far, mostly undocumented) toObservable() function to make Lists observable. Observables are displacing watcher.dispatch() as the preferred way of watching objects for changes.

于 2013-04-11T00:21:33.413 回答