toObservable 似乎不起作用答案

【问题标题】：toObservable doesn't seem to be workingtoObservable 似乎不起作用
【发布时间】：2013-06-02 22:29:50
【问题描述】：

我正在使用 Web UI 进行可观察数据绑定。这是我正在使用的代码的简短 sn-p：

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>

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

【问题讨论】：

标签： dart dart-webui

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

【讨论】：

【解决方案2】：

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

【讨论】：

是的，它最终会被弃用。