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似乎沒有工作

回答

相關問題