我的问题是:如何观察 String 或 num 等简单变量的变化?我知道您可以像这样轻松观察对象:
observe(t, (e) => print ("Value changed"));
但是如何对简单变量执行此操作?
我的问题是:如何观察 String 或 num 等简单变量的变化?我知道您可以像这样轻松观察对象:
observe(t, (e) => print ("Value changed"));
但是如何对简单变量执行此操作?
(这个答案适用于 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,就无法观察顶级或函数范围的单个字符串、布尔值、int 或 double。
如果 string、boolean、int 或 double 是类的字段,则可以使用ObservableMixin
和@observable
注解。
class Foo extends Object with ObservableMixin {
@observable String bar = '';
}
然后,您可以在 Foo 的实例更改时收到通知:
foo.changes.listen((List<ChangeRecord> records) {
// ...
});
下面是一个字符串值绑定的例子,它是对象属性:
<!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');
}