飞镖和可观察的属性

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 属性是可观察的，新值也不会反映到 DOM 中！ 我读过该类还必须使用 @observable 或 mixin 与 Observable 进行注释，所以我尝试了：

@observable
class Counter {
  int count = 0;
}

和

class Counter with Observable {
  int count = 0;
}

但是这些解决方案都不起作用！唯一的工作方法是像这样注释每个属性：

class Counter {
  @observable int count = 0;
}

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

环境：

Polymer 0.9.3 / Polymer 表达式 0.9.1 / Dart Editor 版本 1.0.0_r30798 (STABLE) / Dart SDK 版本 1.0.0.10_r30798

感谢您的回答。

Answer 1

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

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

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