在 Dart 中使用 ObservableList 更新模板

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>

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

飞镖：

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 ...

{{theList}} 

基本上是

{{theList.toString()}}

并且返回的字符串不是可观察的。此外，当您向可观察列表添加值时，对 theList 的引用也不会改变。我记得有一种解决方法可以让 Polymer 识别变化，但不记得它是什么（变压器或其他东西）。

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