PolymerDart: Data binding templates with complex models

Question

So I have a shared library with some models I intend to use on the server as well as the client:

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);
}

I have a Polymer element like this:

<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>

With the following code behind:

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 doesn't seem to observe my property changes: after the initial page load, changing theatre.name or adding or removing an item from theatre.movies does not result in the bindings updating. Polymer's documentation says that expressions are re-evaluated when the value of one or more paths in an expression changes .

If I go into models library and add @observable to all of my model properties, PolymerDart seems to pick up the changes, but now I've added a new dependency to my models library -- and I want this library to work both on the client and the server so I don't have to duplicate my logic.

Also, adding @observable to every possible property I might want to data bind is super overkill and pretty messy to look at.

I assume I'm doing something wrong here: what is it?

Answer 1

The model classes need to extend Observable and the properties need an @observable annotation. See Observe package from polymer dart for more details.

class model extends Observable {
  ...
}

class Theatre extends Model {
  @observable
  String name;
}

I can't tell how the implementation of your CustomCollection looks like but if it contains an embedded List or Map you should initialize it like List backingList = toObservable([]); so Polymer gets notified when elements are added/removed.