在Polymer.dart中使用列表

Question

我用了一种聚合物元素。此元素包含一个简单的数字列表，这些数字显示在它们自己的div标记中。元素顶部有一个计数器来显示这个列表中有多少个元素。

最初，元素是正确显示的，但我已经在元素的顶部放置了一个按钮，该按钮应该向列表中添加一个项，并更新计数器。计数器被更新，项被添加到列表中(如打印所示)，但是DOM没有被更新。

我是在期待不该发生的事情，还是在这里做错了什么？

<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

你需要改变这一行

nums = [0];

至

nums = toObservable([0]); 

或者最好将其添加到字段初始化程序中。

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

否则，只会识别将另一个列表分配给nums，而不会识别列表中的更改。

您的attached方法缺少超级调用

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