다트 웹 구성 요소가 UI 목록을 새로 고치지 않습니다.

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에 대한 목록을 변경하고 값을 할당하면 UI가 새로 고쳐 지지만이 목록을 사용할 때는 아무 것도 표시되지 않습니다.

브라우저에서 오류가 표시되지 않으며 웹 구성 요소의 외부에서 informar를 호출합니다.

힌트가 있습니까?

Answer 1

Making a Map or a List observable in Web UI을 살펴보십시오.

기본적으로 새로운 (아직까지는 문서화되지 않은) toObservable() 함수를 사용하여 목록을 관찰 가능하게 만들고 싶습니다. Observables는 watcher.dispatch()를 객체를 변경하는 데 선호하는 방법으로 대체하고 있습니다.