css - Dart 语言 : observable

Question

我在一个 HTML 文件中有两个表格行。单击第一行时，它会通过 classes.add("active_style") 更改其样式。如果点击第二行，我想清除第一行样式。

我知道我可以写...

querySelector("#first_row_div").classes.clear();

...为了清除第一行类(然后重置其样式)，但在更大的代码中我认为 observable 是最合适的。

我不知道 observable 是否适用于此。但是，如果是这样，我该怎么做呢？

编辑/更新:我认为正确的问题是“当变量发生变化时，有什么方法可以运行函数吗？”。

感谢您的帮助!

Answer 1

您可以为字段创建一个 getter/setter 并在 setter 中运行您的函数。

class MyClass {

  String _cssClass;
  String get cssClass => _cssClass;
  set cssClass(String newClass) {
    _cssClass = newClass;
    updateDom();
  }

  void updateDom() {
    // do important work here
  }
}

您可以使用扩展Observable 的模型类。在这里你必须调用 dirtyCheck() 来让 Observable 检查变化并通知监听器。

Dart 还提供 ChangeNotifier mixin。在这里您不需要调用任何方法进行脏检查。进行更改时会调用监听器。

我刚才在检查功能时写的一个简单示例

import 'package:observe/observe.dart';

class Notifiable extends Object with ChangeNotifier {
  String _input = '';

  @reflectable
  get input => _input;

  @reflectable
  set input(val) {
    _input = notifyPropertyChange(#input, _input, val + " new");
  }

  Notifiable() {
    this.changes.listen((List<ChangeRecord> record) => record.forEach(print));
  }
}

class MyObservable extends Observable {
  @observable
  String counter = '';

  MyObservable() {
    this.changes.listen((List<ChangeRecord> record) => record.forEach(print));
  }
}

void main() {
  var x = new MyObservable();
  x.counter = "hallo";
  Observable.dirtyCheck();

  Notifiable notifiable = new Notifiable();
  notifiable.input = 'xxx';
  notifiable.input = 'yyy';
}