dart web component don't refresh a List on UI

Question

I'm trying to create a simple web component which purpose is to display messages for some seconds and then dissapear. I've got displayed the first two Strings but when I call the informar method nothing happens:

<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>

I can see all those prints correctly on my browser, but the list remains the same, nothing happens. When I change that list for a String and assign values when calling the informar method UI is refreshed but when I use this list, nothing.

Browser don't show any error and I'm calling informar from outside, from a web component up on the herarchy.

Any hint?

Shailen Tuli Shailen Tuli · Accepted Answer · 2013-04-11T00:21:33

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.

dart web component don't refresh a List on UI

1 Answers