javascript - 关于 Polymer，如何将一个 Web 组件的 'speak' 获取到另一个 Web 组件？

Question

我希望能够在 Web 组件 1 中填写表单，单击 Web 组件 1 中的提交按钮，然后将该数据发布到 Web 组件 2 中的网格中。Web 组件 1 与 web 位于不同的 html 文件中组件 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

基本上有两种方法可以做到这一点:

1. 使用mediator pattern 。如果您的父元素同时包含 my-grid 和 foo-form 元素，则此方法效果很好。可以找到解决方案here
2. 如果您想在没有共同父级或不同 DOM 分支的元素之间进行通信，可以使用 iron-signals它提供基本的发布和订阅功能。

解决方案 1 是推荐的方法。