Question

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

我让它在下面工作，让MyItem元素在构造时进行AJAX调用，然后MyItem在返回时更新项目。这是有效的，因为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>

MY-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所说，我可以在列表中查找该项目，然后删除并再次添加。我在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 final List<Item> items = [];

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

1 个答案: