toObservable이 작동하지 않는 것 같습니다.

Question

웹 UI를 사용하여 관찰 가능한 데이터 바인딩을 수행하고 있습니다. 여기에 코드의 간단한 조각은 내가 함께 일하고 있어요된다 index.html을에서

import 'dart:html'; 
import 'dart:json'; 
import 'package:web_ui/web_ui.dart'; 
import 'package:admin_front_end/admin_front_end.dart'; 

//var properties = toObservable(new List<Property>()..add(new Property(1, new Address('','','','','','')))); 
var properties = toObservable(new List<Property>()); 

void main() { 
    HttpRequest.request('http://localhost:26780/api/properties', requestHeaders: {'Accept' : 'application/json'}) 
     .then((HttpRequest req){ 
      final jsonObjects = parse(req.responseText); 
      for(final obj in jsonObjects){ 
      properties.add(new Property.fromJsonObject(obj)); 
      } 
    }); 
} 

, 내가 템플릿에서의 각각의 속성에 properties 바인딩 :

코드의 첫 번째 조각에서

<div is="x-property-table" id="property_table" properties="{{properties}}"></div> 

, 나는 관찰 할 수있는 properties 목록을 채우고 있지만 UI에는 반영되지 않습니다. (코드를 밟아서 요소가 실제로 추가되었는지 확인했습니다). 목록을 미리 채우면 (주석 처리 된 행 참조) 바인딩이 제대로 작동하기 때문에 표시됩니다. 내가 여기서 뭔가 잘못하고있는거야?

Answer 1

문제는 대부분 @observable으로 표시된 변수 또는 유형이 없을 가능성이 큽니다. 웹 UI는 관찰 가능하지 않은 부분에 GUI를 업데이트하기 위해 watchers.dispatch()에 대한 호출을 사용합니다.

당신은 다음과 같은 옵션이 있습니다

1) 수입 전문가 라이브러리를 명시 적으로 dispatch() 전화 :

import 'package:web_ui/watcher.dart' as watchers; 
... 
void main() { 
    HttpRequest.request(...) 
     .then((HttpRequest req){ 
      for(...) { properties.add(new Property.fromJsonObject(obj)); } 
      watchers.dispatch(); // <-- update observers 
    }); 
} 

2) 예를 들어, 관찰, 또는 단지 구성 요소 유형으로 x-property-table 구성 요소의 모든 필드를 표시합니다 :

@observable // <-- this alone should be enough 
class PropertyTable extends WebComponent { 

    // as an alternative, mark property list (or any other field) as observable. 
    @observable 
    var properties = ...; 

참고 : 모음이 표시되어 @observable, UI 엘 컬렉션에 바인딩 된 ements는 컬렉션 객체 자체가 변경된 경우 (항목 추가, 제거, 재정렬)에만 업데이트되며 내용이 변경되지 않은 경우에는 업데이트되지 않습니다. 목록의 객체에는 일부 속성이 수정 됨). 그러나 원래 속성 목록이 ObservableList이므로 @ 관측 가능 주석은 관찰 가능한 메커니즘을 설정하는 방법으로 만 사용됩니다. 목록에 대한 변경 사항은 ObservableList 구현의 일부로 대기합니다.

Answer 2

솔루션 2 (@ 관측 가능)가 더 좋습니다. 내가 아는 한, 관찰자는 변화를 추적하는 오래된 방법이며 아마도 제거 될 것입니다.