toObservable似乎没有工作

我正在使用Web UI来执行可观察数据绑定。下面是我正在使用的代码的简短片段：toObservable似乎没有工作

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中反映出来（我已经浏览了代码并确保元素实际上已被添加）。如果我预先填充列表（请参阅注释掉的行），它会显示，因此绑定至少可以正常工作。我在这里做错了什么？

来源

2013-06-02 w.brian

问题很可能是您没有任何变量或标记为@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实现的一部分。

来源

2013-06-02 23:38:53

这样做。非常感谢。 –

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

来源

2013-06-03 09:09:00 Nico

是的，它最终会被弃用。 –

toObservable似乎没有工作

回答

相关问题