dart - 从 Dart 中的其他 Web 组件访问状态

Question

假设您在 Dart 中将一个网络组件存储在另一个网络组件中。有什么方法可以从其他组件访问状态吗？

假设我有一个名为 x-notebook-element 的 Polymer 元素还有一个叫x-note-element嵌入其中(通过迭代器):

<polymer-element name="x-notebook-element">
  <template>
    <ul>
      <template repeat="{{note in notes}}">
        <li is="x-note-element" note="{{note}}"></li>
      </template>
    </ul>
  </template>

  <script type="application/dart" src="notebook.dart"></script>
</polymer-element>

困难在于我希望能够点击一个Delete x-note-element 中的按钮 删除 x-note-element从 DOM 和 中删除 note从 notes 与之关联列表。

Answer 1

您可以在 x-note-element 中触发 CustomEvent :

dispatchEvent(new CustomEvent('my-delete-event', detail: note.id));

并收听那些事件:

<li is="x-note-element" note="{{note}}" on-my-delete-event="{{delete}}"></li>

然后在 x-notebook-element 的 dart 部分:

delete(CustomEvent e, var detail, Element target) {
  final deletedId = e.detail;
  // update notes
}