元素之间的聚合物通信答案

【问题标题】：Polymer communication between elements元素之间的聚合物通信
【发布时间】：2016-02-17 17:30:12
【问题描述】：

我想用 Polymer 元素实现子父级之间的通信。

这里是我的 index.html

<proto-receiver data="message">
        <proto-element data="message"></proto-element>
</proto-receiver>

两个元素都有各自的“数据”属性

properties: {
   data: {
      value: 'my-data',
      notify: true,
   }
},

在 proto-receiver 中，这是我通过处理简单的点击来更新“数据”的父级

<template>
    <span on-tap="onClick">proto receiver: {{data}}</span>
    <content></content>
</template> 


onClick: function () {
    this.data = 'new-message';
},

我希望更改也传播到子元素，正如它提到的here。

我通过在我的子元素中传递一个 setter 并像这样调用它来实现这一点。我猜这不是应该的方式。

 Polymer.Base.$$('body').querySelector('proto-element').setData(this.data);

我做错了什么

谢谢

更新：

对于那些来这里的人。正确的做法是使用事件。

Polymer 1.x

this.fire('kick', {kicked: true});

Polymer 2.x（简单的javascript）

this.dispatchEvent(new CustomEvent('kick', {detail: {kicked: true}}));

在这两种情况下，接收者都应该实现常规的 addEventListener

document.querySelector('x-custom').addEventListener('kick', function (e) {
    console.log(e.detail.kicked); // true
})

【问题讨论】：

可能你想要Polymer.dom(this).querySelector('proto-element').setData(this.data);。但是，如果您的 proto-* 对象本身位于 Polymer 模板中，您可以使用数据绑定来为您执行此操作。
谢谢斯科特。您的意思是由于标签，更改不会传播吗？有效地将我的子元素直接放在父 Polymer 模板中就可以了。好像提到了同样的问题here
<content> 更改了 rendering 上下文，但不会更改实际的树关系。在您的示例中，proto-element 仍然是 proto-receiver 的直接子代，而与 <content> 无关。我上面的意思是，如果两个元素本身都在模板中，则可以直接绑定它们：<template><p-r data="{{data}}"><p-e data="{{data}}"></p-e></p-r></template>

标签： data-binding polymer two-way

【解决方案1】：

为Scott Miles' cmets 提供一个具体示例，如果您可以将父元素和子元素包装在 Polymer 模板中（例如 dom-bind 或作为另一个 Polymer 元素的子元素），那么您可以以声明方式处理此问题.查看mediator pattern。

父元素：

<dom-module id="parent-el">
  <template>
    <button on-tap="onTap">set message from parent-el</button>
    <p>parent-el.message: {{message}}</p>
    <content></content>
  </template>
  <script>
    Polymer({
      is: 'parent-el',
      properties: {
        message: {
          type: String,
          notify: true
        }
      },
      onTap: function() {
        this.message = 'this was set from parent-el';
      }
    });
  </script>
</dom-module>

子元素：

<dom-module id="child-el">
  <template>
    <p>child-el.message: {{message}}</p>
  </template>
  <script>
    Polymer({
      is: 'child-el',
      properties: {
        message: {
          type: String,
          notify: true
        }
      }
    });
  </script>
</dom-module>

index.html:

<template is="dom-bind" id="app">
  <parent-el message="{{message}}">
    <child-el message="{{message}}"></child-el>
  </parent-el>
</template>
<script>
  (function(document) {
    var app = document.querySelector('#app');
    app.message = 'this was set from index.html script';
  }) (document);
</script>

JS Bin

【讨论】：

【解决方案2】：

我遇到了同样的问题并得到了解决方案并修复如下

this.fire('iron-signal', {name: 'hello', data: null});

你可以参考这个铁信号，你会得到你正在寻找的解决方案，它基本上是从任何元素到另一个元素的事件触发

希望对你有所帮助 Polymer iron signals

【讨论】：

最好补充一点，fire 事件也可用于触发多个元素。