Question

我正在使用Web UI进行可观察的数据绑定。以下是我正在使用的简短代码片段：

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中，我将properties绑定到模板中的相应属性：

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

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

Answer 1

问题很可能是您没有标记为@observable的任何变量或类型。由于缺少可观察量，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时，绑定到集合的UI元素仅在集合对象本身被更改（项目添加，删除，重新排序）时更新，而不是在其内容被更改时更新（例如，列表中的对象具有一些财产修改）。但是，由于您的原始属性列表是ObservableList，因此@observable注释仅在此处用作打开可观察机制的方法。对列表的更改将作为ObservableList实现的一部分排队。

Answer 2

我认为解决方案2（@observable）更好。据我所知，观察者是跟踪变化的旧方法，可能会被删除。

toObservable似乎没有用

2 个答案: