CODEWITHSUNDEEP
dartdart-polymer
Eric Taix
Eric Taix

Reputation: 908

dart and observable attributes

I'm writing a sample application with Polymer and Dart and I'm encountering an issue with observable attributes.

Here is the HTML code:

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;
}

When I click the increment button, the counter.count attribute is incremented but even if the counter attribute is observable, the new value is not reflected into the DOM ! I've read that the class must also be annotated with @observable or mixin with Observable, so I tried:

@observable
class Counter {
  int count = 0;
}

and 

class Counter with Observable {
  int count = 0;
}

but neither of these solutions work ! The only way to work is to annotate each attributes like this:

class Counter {
  @observable int count = 0;
}

I thought that annotate the class itself is the same as annotate all attributes. So anyone can explain me why it doesn't work and what is the proper way to make a class observable so any change will be reflect in the DOM?

Env:

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

Thanks for your answer.

Upvotes: 1

Views: 503

Answers (1)

Shailen Tuli
Shailen Tuli

Reputation: 14171

You should change your model definition to the following:

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

Counter should extend Observable and the observed field should be annotated with @observable.

Upvotes: 2

Related Questions