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元素：

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

如果我进入models库并将@observable添加到我的所有模型属性中，PolymerDart似乎会接受更改，但现在我已经为我的模型库添加了新的依赖项 - 我希望这个库在客户端和服务器上都可以工作，所以我不必复制我的逻辑。

此外，将@observable添加到我可能想要数据绑定的每个可能的属性是超级矫枉过正，看起来很混乱。

我认为我在这里做错了什么：它是什么？

Answer 1

模型类需要扩展Observable，属性需要@observable注释。有关详细信息，请参阅Observe package from polymer dart。

class model extends Observable {
  ...
}

class Theatre extends Model {
  @observable
  String name;
}

我无法告诉您CustomCollection的实现方式如何，但如果它包含嵌入的列表或地图，则应将其初始化为List backingList = toObservable([]);，以便在添加元素时通知Polymer除去。

PolymerDart：具有复杂模型的数据绑定模板

1 个答案: