How do you create an observable derivative property in Dart / Polymer Dart?

Question

I have a component that I want to bind a different css class to based on a boolean value. I have the following in my component code:

bindCssClass(div, "open", this, "task.isOpen");
bindCssClass(div, "closed", this, 'task.isClosed');

Where isOpen / isClosed are defined as the following:

@observable bool isOpen = true;
get isClosed => !isOpen;

The question is, how can I get isClosed to be observable, but based on changes to isOpen? I'd like to know this case, but also for cases that are more complicated (e.g. a string that is derived from multiple components)

Additionally, is there a better way to use bindCss for such a simple case? Binding to '!task.isOpen' doesn't work, though it would be nice if it did.

Answer 1

you may want to check observable_getter example from dart-polymer-dart-examples github repo.

class App extends Object with ObservableMixin {
  @observable
  DateTime timestamp;

  App() {
    bindProperty(this, const Symbol('timestamp'),
      () => notifyProperty(this, const Symbol('second')));
  }

  int get second => timestamp.second;
}


main() {
  App app = new App();
  new Timer.periodic(const Duration(seconds: 1), (_) {
    app.timestamp = new DateTime.now();
  });
  query('#tmpl').model = app;
}

Also check discussion at: https://code.google.com/p/dart/issues/detail?id=12473