dart web component не обновляет список в пользовательском интерфейсе

Question

Я пытаюсь создать простой веб-компонент, целью которого является отображение сообщений в течение нескольких секунд, а затем исчезновение. Я получил отображаются первые две строки, но когда я вызываю метод informar ничего не происходит:

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

Я могу видеть все эти отпечатки правильно в моем браузере, но список остается тем же, ничего не происходит. Когда я изменяю этот список для String и присваиваю значения при вызове метода интерфейса Informar, обновляется, но когда я использую этот список, ничего.

Браузер не обнаруживает ошибок, и я вызываю информатор извне, от веб-компонента вверх по иерархии.

Подсказка?

Answer 1

Посмотрите на Making a Map or a List observable in Web UI.

В принципе, вы хотите использовать новую (и до сих пор, в основном недокументированную) функцию toObservable(), чтобы сделать списки наблюдаемыми. Наблюдаемые объекты перемещают watcher.dispatch() как предпочтительный способ просмотра объектов для изменений.