dart - toObservable 似乎不起作用

Question

我正在使用 Web UI 进行可观察的数据绑定(bind)。这是我正在使用的简短代码片段:

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));
          }
    });
}

在 index.html 中，我绑定(bind)了 properties到它在模板中的相应属性:

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

在第一段代码中，我填充了可观察的 properties列表，但它从未反射(reflect)在 UI 中(我已经逐步检查了代码并确保实际上添加了元素)。如果我预先填充列表(请参阅注释掉的行)，它会显示，因此绑定(bind)至少可以正常工作。我在这里做错了吗？

Answer 1

问题很可能是您没有任何变量或类型标记为 @observable .由于缺少 observables，Web UI 依赖于对 watchers.dispatch() 的调用。为了更新GUI。

您有以下选择:

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 , 绑定(bind)到集合的 UI 元素仅在集合对象本身发生更改(添加、删除、重新排序项目)时更新，而不是在其内容更改时(例如，列表中的对象修改了某些属性)。但是，由于您的原始属性列表是 ObservableList , @observable 注解在这里只是作为开启可观察机制的一种方式。对列表的更改作为 ObservableList 的一部分进行排队。执行。