2014-10-11 66 views
1

所以我有一些模型,我打算在服務器上使用,以及客戶端共享庫:PolymerDart:數據綁定模板和複雜的模型

library models; 

class Model { 
    String id; 
} 

class Theatre extends Model { 
    String name; 
    // implements List<E> 
    CustomCollection<Movie> movies = new CustomCollection(); 

    Theatre(this.name); 
} 

class Movie extends Model { 
    String name; 
    Movie(this.name); 
} 

我有這樣的聚合物元件:

<polymer-element name="my-app"> 
    <template> 
    <movie-list movies="{{theatre.movies}}"></movie-list> 
    <button on-click="{{moreMovies}}">More movies!</button> 
    </template> 
    <script type="application/dart" src="my_app.dart"></script> 
</polymer-element> 

用下面的代碼背後:

import 'package:polymer/polymer.dart'; 
import 'package:my_app/models.dart'; 

@CustomTag('my-app') 
class MyApp extends PolymerElement { 
    @observable theatre = new Theatre('Lucky Seven Cinema'); 

    void moreMovies(event, detail, sender) { 
    theatre.movies.add(new Movie('The Goonies')); 
    } 
} 

PolymerDart似乎沒有觀察到我的屬性更改:初始頁面加載後,更改theatre.name或從theatre.movi​​es添加或刪除項目不會導致綁定更新。 Polymer的文檔說expressions are re-evaluated when the value of one or more paths in an expression changes

如果我進入models庫並添加@observable我所有的模型屬性,PolymerDart似乎拿起變化,但現在我已經添加了一個新的依賴我的模型庫 - 我想這個庫工作無論是在客戶端還是服務器上,所以我不必重複自己的邏輯。

此外,將@observable添加到每個可能的屬性,我可能想要數據綁定是超級矯枉過正和相當凌亂的看看。

我假設我在這裏做錯了什麼:它是什麼?

回答

1

模型類需要擴展Observable,屬性需要@observable註釋。有關更多詳細信息,請參閱Observe package from polymer dart

class model extends Observable { 
    ... 
} 

class Theatre extends Model { 
    @observable 
    String name; 
} 

我不能告訴你CustomCollection實施的樣子,但如果它包含一個嵌入列表或地圖中你應該初始化它像List backingList = toObservable([]);所以聚合物得到通知時添加的元素/刪除。

+0

如果我擴展了Observable並將@observable註釋添加到支持列表中,那麼'CustomCollection'不會發出更改事件。支持清單當然是。我查看了PolymerDart的源代碼,顯然它們處理ObservableList的方式不同;你不能代理一個ObservableList的事件,因爲他們不會被監聽。 – ALW 2014-10-11 21:53:33

+0

經過多次調查後,我確定沒有其他辦法可以用@observable來感染共享庫。 – ALW 2014-10-14 01:57:47