Accessing state from other web components in Dart

Question

Let's say that you have one web component stored inside of another in Dart. Is there any way to access state from other components?

Let's say that I have a Polymer element called x-notebook-element and one called x-note-element embedded inside of it (via an iterator):

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

The difficulty is that I want to be able to click on a Delete button within an x-note-element that removes the x-note-element from the DOM and removes the note associated with it from the notes list.

possible duplicate of [How to remove a child component with a delete button in the child itself](http://stackoverflow.com/questions/20406328/how-to-remove-a-child-component-with-a-delete-button-in-the-child-itself) — Günter Zöchbauer, Jan 28 '14 at 07:43

score 4 · Accepted Answer · answered Jan 28 '14 at 07:51

You can fire a CustomEvent in your x-note-element :

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

And listen to those events :

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

Then in the dart part of x-notebook-element :

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

Accessing state from other web components in Dart

1 Answers1