html - 在 Polymer.dart 中使用列表

Question

我有一个使用 Dart 的 Polymer 元素。该元素包含一个简单的数字列表，这些数字显示在它们自己的 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，而不会识别列表内的更改。

您的附加 方法缺少 super 调用

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