dart - Dart 和可观察的属性

Question

我正在使用Polymer和Dart编写示例应用程序，并且遇到了具有可观察属性的问题。

这是HTML代码:

clickcounter.html

<polymer-element name="click-counter">
  <template>
    <div>
      <button on-click="{{increment}}">Click me</button><br>
      <span>(click count: {{counter.count}})</span>
    </div>
  </template>
  <script type="application/dart" src="clickcounter.dart"></script>
</polymer-element>

clickcounter.dart

@CustomTag('click-counter')
class ClickCounter extends PolymerElement {
  @published Counter counter = new Counter();

  ClickCounter.created() : super.created() {
  }

  void increment() {
    counter.count++;
  }
}


class Counter {
  int count = 0;
}

当我单击增加按钮时，counter.count属性会增加，但是即使counter属性是可观察到的，新值也不会反射(reflect)到DOM中!
我已经读过，该类还必须使用@observable进行注释或使用Observable进行mixin注释，因此我尝试了以下操作:

@observable
class Counter {
  int count = 0;
}

和

class Counter with Observable {
  int count = 0;
}

但是这些解决方案都不起作用!唯一的工作方式是注释每个属性，如下所示:

class Counter {
  @observable int count = 0;
}

我认为注释类本身与注释所有属性相同。因此，任何人都可以解释我为什么它不起作用以及使类可观察的正确方法是什么，以便任何更改都将反射(reflect)在DOM中？

环境:

Polymer 0.9.3 / Polymer expressions 0.9.1 / Dart Editor version 1.0.0_r30798 (STABLE) / Dart SDK version 1.0.0.10_r30798

感谢您的回答。

Answer 1

您应该将模型定义更改为以下内容:

class Counter extends Observable {
  @observable int count = 0;
}

Counter应该扩展 Observable，并且观察到的字段应该用 @observable注释。