Using a list with Polymer.dart
I have a Polymer element using Dart. This element contains a simple list of numbers that appear in their own div tags. At the top of the item is a counter that displays the number of items in this list.
Initially the item is displayed correctly, but I placed a button at the top of the item that should add the item to the list and update the spinner. The counter is updated and the 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>
source to share
You need to change this line
nums = [0];
to
nums = toObservable([0]);
or is it better to add it to the field initializer
@observable List nums = toObservable([0]);
Otherwise, only the assignment to another list is recognized nums
, not changes within the list.
Your method is attached
missing supercall
void attached() { super.attached(); // <== added nums = toObservable([0]); // <== can be moved to the field initializer count = nums.length; }
source to share