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的分配，但不会识别列表中的更改。

您的attached方法缺少超级电话

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

使用Polymer.dart列表

1 个答案: