Using a list with Polymer.dart

Question

I have a Polymer element using Dart. This element contains a simple list of numbers that are displayed in their own div tags. There is a counter at the top of the element to display how many elements are in this list.

Initially, the element is displayed correctly, but I've placed a button at the top of the element that should add an item to the list, and update the counter. The counter is updated, and items are added to the list (as the print shows), but the DOM is not updated.

Am I expecting something that shouldn't happen or am I doing something wrong here?

<link rel="import" href="packages/polymer/polymer.html">

<polymer-element name="list-test">
  <template>


    <button on-click="{{click}}">Click</button>
    <div>Counter: {{count}}</div>

    <template repeat="{{num in nums}}">
      <div>{{num}}</div>
    </template>


  </template>
  <script type="application/dart">
    import "dart:async";
    import "package:polymer/polymer.dart";

    @CustomTag("list-test")
    class listTest extends PolymerElement {

      listTest.created() : super.created();

      @observable List nums;
      @observable int count;

      void attached() {
        nums = [0];
        count = nums.length;
      }

      void click() {
        nums.add(count++);
        print(nums);
      }
    }
  </script>
</polymer-element>

Answer 1

You need to change this line

nums = [0];

to

nums = toObservable([0]); 

or better add it to the field initializer

@observable List nums = toObservable([0]);

Otherwise only the assignment of another list to nums is recognized but not the changes inside the list.

Your attached method is missing the super call

  void attached() {
    super.attached(); // <== added
    nums = toObservable([0]); // <== can be moved to the field initializer
    count = nums.length;
  }