如何用dart语言观察简单变量

时间:2013-08-30 13:38:19

标签: dart dart-webui

我的问题是:如何观察像String或num这样的简单变量的变化? 我知道你可以很容易地观察到这样的物体:

observe(t, (e) => print ("Value changed"));

但如何在简单变量上执行此操作?

2 个答案:

答案 0 :(得分:4)

(这个答案适用于Polymer.dart。)

observe包中包含单个可观察值的包装器:ObservableBox

import 'package:observe/observe.dart';
import 'dart:async';

void main() {
  ObservableBox myValue = new ObservableBox('hello');

  myValue.changes.listen((List<ChangeRecord> records) {
    PropertyChangeRecord record = records[0] as PropertyChangeRecord;

    print('${record.field} changed, it is now ${myValue.value}');
  });

  new Timer.periodic(const Duration(seconds: 1), (t) {
    myValue.value = new DateTime.now();
  });
}

在不使用ObservableBox的情况下,无法观察顶级或函数范围的单个字符串,boolean,int或double。

如果string,boolean,int或double是类的字段,则可以使用ObservableMixin@observable注释。

class Foo extends Object with ObservableMixin {
  @observable String bar = '';
}

当Foo实例发生变化时,您可以收到通知:

foo.changes.listen((List<ChangeRecord> records) {
  // ...
});

答案 1 :(得分:2)

以下是绑定作为对象属性的字符串值的示例:

<!DOCTYPE html>

<html>
  <head>
    <title>index</title>
    <script src="packages/polymer/boot.js"></script>
  </head>

  <body>
    <template id="_template" bind>
      <input type="text" value="{{name}}">
      <p>The name is {{name}}</p>
    </template>

    <script type="application/dart" src="index.dart"></script>
  </body>
</html>
import 'dart:html';
import 'package:polymer/polymer.dart';

class Person extends Object with ObservableMixin {
  @observable
  String name;
  Person(this.name);
}

main() {
  query("#_template").model = new Person('Bob');
}