如何使用谷歌Dart web-ui @observable独立

Question

我不知道如何使用@observable注释/Observable类在对象的状态发生变化时获得简单的通知。

import 'package:web_ui/observe.dart';
@observable class T{
  String x;
// what else is needed?
}
T t = new T();
observe(t, (e) => print ("Value changed"));
t.x = "Changed";

如果可能的话，我想使用可观察对象而不使用web-ui的其余部分(作为backbone.js的替代品)。

Answer 1

您需要运行dwc编译器，它查找@observable并生成实际实现观察的新源代码。我从未尝试在没有Web UI的情况下运行可观察对象，但您肯定需要dwc来生成正确的输出。

Answer 2

我只是花了一些时间尝试做同样的事情。如上所述，没有web/Polymer，您无法使用@observable注释。但是你可以使用observable包。下面是一个简单的例子:

import 'package:observe/observe.dart';
void main() {
  var person = new Person(18, false);
  person.changes.listen((List<ChangeRecord> changes) {
    changes.forEach((PropertyChangeRecord change) {
      print("$change");
    });
  });
  person.changes.listen((List<ChangeRecord> changes) {
    changes.where((PropertyChangeRecord c) => c.name == #employed).forEach((PropertyChangeRecord change) {
      print("Employment status changed!");
    });
  });
  print("start changing");
  person.age =  19;
  person.age =  19;
  person.age =  19;
  person.age = 20;
  person.employed = true;
  person.age = 21;
  person.age = 22;
  print("finish changing");
}
class Person extends ChangeNotifier {
  int _age;
  int get age => _age;
  void set age (int val) {
    _age = notifyPropertyChange(#age, _age, val);
  }
  bool _employed;
  bool get employed => _employed;
  void set employed (bool val) {
    _employed = notifyPropertyChange(#employed, _employed, val);
  }
  Person(this._age, this._employed);
}

事件是异步的，所以如果您依赖于这些事件的顺序，请小心。上面程序的输出是

start changing
finish changing
#<PropertyChangeRecord Symbol("age") from: 18 to: 19>
#<PropertyChangeRecord Symbol("age") from: 19 to: 20>
#<PropertyChangeRecord Symbol("employed") from: false to: true>
#<PropertyChangeRecord Symbol("age") from: 20 to: 21>
#<PropertyChangeRecord Symbol("age") from: 21 to: 22>
Employment status changed!