In Bezug auf Polymer, wie bekomme ich eine Webkomponente, um mit einer anderen Webkomponente zu sprechen?

Question

Ich möchte ein Formular in der Webkomponente 1 ausfüllen, auf eine Senden-Schaltfläche in der Webkomponente 1 klicken und diese Daten anschließend in ein Raster in der Webkomponente 2 übertragen. Die Webkomponente 1 befindet sich in einer anderen HTML-Datei als der Webkomponente 2.

//web component 1 
<dom module id="foo-form"> 
<template> 
    <paper-input id="myID" label="ID"value="{{myID}}"></paper-input> 
    <paper-button id="submitForm" on-click="submitForm">Submit</paper-button> 
</template> 
<script> 
    (function() { 
    "use strict"; 
    Polymer({ 
    is: 'foo-form', 
    }); 
    })(); 
</script> 
</dom-module> 


//Web component 2* 
<dom-module id="my-grid"> 
    <template> 
    <vaadin-grid selection-mode="single" id="fooBarGrid" > 
     <table> 
     <col name="vendorID" sortable="" /> 
     <thead> 
      <tr> 
      <th>ID</th> 
     </tr> 
     </thead> 
     </table> 
    </vaadin-grid> 
    </template> 
<script> 
    document.addEventListener("WebComponentsReady", function() { 

     // Reference to the grid element. 
     var grid = grid || document.querySelector("#fooBarGrid"); 

     // Reference to the template element 
     var template = template || document.querySelector("template"); 

     // Add some example data as an array. 
     var data = [ 
     { "myId": 0 } 
     ]; 
     grid.items = data; 
}); 

    </script> 
<script> 
    (function() { 
     'use strict'; 

     Polymer({ 
      is: 'my-grid', 
     }); 
    })(); 
    </script> 
</dom-module> 

Answer 1

es gibt grundsätzlich zwei Möglichkeiten, es zu tun:

1. die mediator pattern verwenden. Dies funktioniert gut, wenn Sie ein übergeordnetes Element haben, das sowohl Ihr my-grid als auch Ihr foo-form Element enthält. Eine Lösung kann gefunden werden here
2. Wenn Sie zwischen Elementen kommunizieren möchten, die kein gemeinsames übergeordnetes Element oder andere DOM-Zweige haben, können Sie iron-signals verwenden, das grundlegende Publish- und Subscribe-Funktionen bereitstellt.

Lösung 1 ist der empfohlene Ansatz.