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注释或者用Observable进行mixin，所以我试过了：

@observable
class Counter {
  int count = 0;
}

和

class Counter with Observable {
  int count = 0;
}

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

class Counter {
  @observable int count = 0;
}

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

ENV：

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进行注释。

飞镖和可观察的属性

1 个答案: