Data binding 元素间的聚合物通讯

我想用高分子元素实现孩子和家长之间的沟通

这里是我的index.html

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

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

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


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

我做错了什么

谢谢

更新：

为那些来这里的人。正确的方法是使用事件

（简单javascript）

在这两种情况下，接收器都应该实现常规加法器Listener

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

---

为了给“注释”提供一个具体的示例，如果您可以将父元素和子元素包装在聚合模板中（例如

dombind

，或者作为另一个聚合元素的子元素），那么您可以声明性地处理此问题。看看这本书

父元素：

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

---

我遇到了同样的问题，得到了解决方案，并按如下所示进行了修复

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

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

希望这对你有帮助

---

您可能需要

Polymer.dom（this.querySelector（'proto-element'）.setData（this.data）。但是，如果您的
proto-*
对象本身位于聚合模板内，则可以使用数据绑定来完成此操作。谢谢Scott。您的意思是由于标签的原因，更改不会传播吗？有效地将我的子元素直接放入父聚合物模板中，效果很好。似乎也提到了相同的问题
更改了渲染上下文，但没有更改实际的树关系。在您的示例中，
proto元素
仍然是
proto receiver
的直接子元素，而与
无关。我在上面的意思是，如果两个元素本身都在一个模板中，那么可以直接绑定它们：
添加fire事件也可以用于触发多个元素。
this.dispatchEvent(new CustomEvent('kick', {detail: {kicked: true}}));

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

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

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

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