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

Question

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

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

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

主要-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>

主要-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());
  }
}

我的-item.html:

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

我的-item.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 指出的那样，我可以在列表中查找该项目，然后将其删除并再次添加。我在主应用程序中编写了这个函数，以便在更新时调用：

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

但是，当我调用那个 polymer 时并没有呈现更新的项目。我必须创建一个新项目：

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 final List<Item> items = [];

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

Best way to notify polymer of updates to list items

dart

dart-polymer

polymer-1.0