dart - 聚合物 Dart : Data binding templates with complex models

Question

所以我有一个共享库，其中包含一些我打算在服务器和客户端上使用的模型:

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 添加或删除项目不会导致绑定(bind)更新。 Polymer 的文档说 expressions are re-evaluated when the value of one or more paths in an expression changes .

如果我进入 models库并添加 @observable对于我所有的模型属性，PolymerDart 似乎接受了更改，但现在我已经向我的模型库添加了一个新的依赖项——我希望这个库在客户端和服务器上都可以工作，所以我没有重复我的逻辑。

另外，添加 @observable对于我可能想要数据绑定(bind)的每一个可能的属性，都是 super 矫枉过正的，而且看起来很困惑。

我假设我在这里做错了什么:它是什么？

Answer 1

模型类需要扩展 Observable并且属性需要 @observable注解。见 Observe package from polymer dart更多细节。

class model extends Observable {
  ...
}

class Theatre extends Model {
  @observable
  String name;
}

我不知道你的 CustomCollection 是如何执行的看起来像，但如果它包含一个嵌入的列表或 map ，你应该像 List backingList = toObservable([]); 一样初始化它所以当添加/删除元素时，Polymer 会收到通知。