2

I'm using Web UI to do observable data binding. Here is the brief snippet of code I'm working with:

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

In index.html, I bind properties to it's respective property in the template:

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

In the first snippet of code, I'm populating the observable properties list, but it never reflects in the UI (I've stepped through the code and made sure elements were in-fact being added). If I pre-populate the list (see the commented out line), it does display, so the binding is at least working properly. Am I doing something wrong here?

4

2 回答 2

3

问题很可能是您没有任何变量或类型标记为@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。

于 2013-06-02T23:38:53.367 回答
0

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

于 2013-06-03T09:09:00.627 回答