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

Question

假设您在 Dart 中将一个 Web 组件存储在另一个 Web 组件中。有没有办法从其他组件访问状态？

假设我有一个名为 x-notebook-element 的 Polymer 元素和一个名为 x-note-element 的 Polymer 元素嵌入其中（通过迭代器）：

<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 中从 DOM 中删除 x-note-element 并且删除notes 列表中与之关联的 note。

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的飞镖部分：

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