从Dart中的其他Web组件访问状态(Accessing state from other web components in Dart)

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

假设我有一个名为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>
 
 困难在于我希望能够单击x-note-element中的Delete按钮，该按钮从DOM中删除x-note-element 并从notes列表中删除与其关联的notes 。 
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.
                
最满意答案
                
                    
                        
 您可以在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
} 
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
}