镖：

Question

我正在尝试将ObservableList绑定到模板，我对它是如何工作有点困惑。在下面的示例中，单击按钮时，将迭代通过元素迭代显示的列表实例，但不会直接使用实例。

镖：

@CustomTag('my-observing-list')
class ObservingList extends PolymerElement {

  ObservingList.created() : super.created();

  @observable ObservableList theList = new ObservableList.from([0, 1, 2, 3, 4]);

  addElement(var x) {
    theList.add(5);
  }
}

HTML：

<polymer-element name="my-observing-list">
    <template>
        <template repeat="{{l in theList}}">
            {{l}}
        </template>
        {{theList}}
        <button on-click="{{addElement}}"></button>
    </template>
</polymer-element>

进一步增加了我的困惑，如果我在元素中添加一个可观察的整数，将其包含在模板中，并在单击按钮时更新它，则会导致列表的两个实例单击按钮时更新。

镖：

class ObservingList extends PolymerElement {

  ObservingList.created() : super.created();

  @observable ObservableList theList = new ObservableList.from([0, 1, 2, 3, 4]);
  @observable var number = 0;

  addElement(var x) {
    theList.add(5);
    number = 1;
  }
}

HTML：

<polymer-element name="my-observing-list">
    <template>
        <template repeat="{{l in theList}}">
            {{l}}
        </template>
        {{theList}}
        {{number}}
        <button on-click="{{addElement}}"></button>
    </template>
</polymer-element>

有人可以解释这里发生了什么吗？

Answer 1

有一段时间我使用了Polymer 0.16 ......

BasicEffect

基本上是

{{theList}}

并且返回的字符串不是可观察的。当您向可观察列表添加值时，对{{theList.toString()}}的引用也不会更改。我记得有一种解决方法可以让Polymer认识到这种变化但不记得它是什么（变压器或什么的）。

直接观察到数字，当它发生变化时，它被Polymer识别。

使用ObservableList更新Dart

镖：

HTML：

镖：

HTML：

1 个答案: