观察 Polymer 1 列表中项目属性的变化

Question

我有一个属性

  @property final List<Item> items = [
    new Item('red', false),
    new Item('green', true),
    new Item('blue', false)
  ];

其中 class Item 看起来像

class Item extends JsProxy {
  @reflectable String color;
  @reflectable bool checked;
  Item(this.color, this.checked);
}

HTML看起来像

  <template is="dom-repeat" items="{{items}}">
    <label><span>{{item.color}}</span>
      <input type="checkbox"
             value="{{item.color}}"
             checked="{{item.checked::change}}">
    </label>
  </template>

我希望在 checked 中的任何项目发生更改时收到通知。

Answer 1

可以使用 @Observe('some.path') 注释设置观察者。如果路径包含 .*，则使用包含更改的实际路径的更改记录调用处理程序。

@Observe('items.*')
  void updateSelectedColors(Map record, [_]) {
    String path = record['path'];
    if (path == 'items' || path.endsWith('.checked')) {
      // do something
    }
  }
}

path == 'items'申请初始化items属性默认值。 path.endsWidth('.checked') 确保代码 (// do something) 仅在 checked 属性实际更改时执行。忽略所有其他更改。

观察 Polymer 1 列表中项目属性的变化

Observe changes to properties of items in a list in Polymer 1

dart

dart-polymer