dart - 通知聚合物列表项目更新的最佳方式

Question

我有一个使用 Polymer 1.0 的 Dart 网络应用程序。主应用程序正在显示项目列表。主应用程序可以将项目添加到该列表，然后一段时间后 AJAX 调用将返回并更新添加项目的状态。更新方法将需要利用 dart-polymer 辅助方法来通知聚合物更改。但是，我不知道如何为此更新传递对 dart-polymer 辅助方法的引用。

我通过使用 MyItem 让它在下面工作元素在构造时进行 AJAX 调用，然后 MyItem返回时更新项目。这是有效的，因为 MyItem只有一个项目。然而，这并不理想，因为 MyItem总是进行 AJAX 调用，不能简单地用于显示 item 的状态如果页面重新加载。

我正在寻找一种方法来通知 Polymer 某个项目已更改包含在列表中某处的状态(索引未知)。

main-app.html:

<dom-module id="main-app">
  <paper-button on-tap="addItem>Add</paper-element>
  <template is="dom-repeat" items="items" as="item">
    <my-item item="{{item}}"></my-item>
  </template>
</dom-module>

main-app.dart:

@PolymerRegister('main-app')
class MainApp extends PolymerElement {
  final List<Item> items = [];

  @reflectable
  void addItem(Event e, Object detail) {
    insert('items', 0, new Item());
  }
}

我的项目.html:

<dom-module id="my-item">
  <template>
    <div>{{item.state}}</div>
  </template>
</dom-module>

我的项目.dart:

@PolymerRegister('my-item')
class MyItem extends PolymerElement {
  @property
  Item item;

  MyItem.create() : super.create();

  ready() {
    HttpRequest.postFormData("/items").then((HttpRequest request) {
      set('item.state', request.responseText);
    });
  }
}

item.dart:

class Item extends JsProxy {
  @reflectable
  String state;

  Item(this.state);
}

* 编辑 *

正如 Günter 指出的那样，我可以在列表中查找该项目，然后将其删除并再次添加。我在 main-app 中编写了此函数以在更新时调用:

void fireItemUpdate(Item item) {
  int i = items.indexOf(item);
  removeItem('items', item);
  insert('items', i, item);
}

但是，当我调用该聚合物时，并没有呈现更新的项目。我必须创建一个新项目:

void fireItemUpdate(Item item) {
  int i = items.indexOf(item);
  removeItem('items', item);
  Item item2 = new Item(item.state);
  insert('items', i, item2);
}

当然，这也不是很好，因为 fireItemUpdate 不能被多次调用(因为它会从列表中删除原始运行)。

关于聚合物结合的文档:https://github.com/dart-lang/polymer-dart/wiki/data-binding-syntax

Answer 1

您需要制作 items属性(property)

@property final List<Item> items = [];