元件之间的聚合物连通 [英] Polymer communication between elements

问题描述

这里我的index.html

 < proto-receiver data =my-coded-data> 
< proto-element data =my-child-coded-Data>< / proto-element> 
< / proto-receiver> 
  

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

 属性：{
 data：{
 value：'my-data'，
通知：true，
} 
}，
  

在原始接收者中，父母是我通过处理简单点击更新数据

 < template> 
< span on-tap =onClick> proto receiver：{{data}}< / span> 
< content>< / content> 
< / template> 
 
 
 onClick：function（）{
 this.data ='my-new-data'; 
}，
  

我想将更改传播到子元素，因为它提到了 here 。

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

  Polymer.Base。$$（'body'）。 querySelector（'proto-element'）。setData（this.data）; 
  

我在做错什么

谢谢

解决方案

提供一个具体的例子来 Scott Miles '的评论，如果您可以将您的父元素和子元素包装在聚合物模板中（例如 dom-bind 或作为子元素另一个聚合物元素），那么你可以声明地处理这个。查看调解员模式。

父元素

 < dom-module id =parent-el> 
< template> 
< button on-tap =onTap>从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 ='这是从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-bindid =app> 
< parent-el message ={{message}}> 
< child-el message ={{message}}>< / child-el> 
< / parent-el> 
< / template> 
< script> 
（function（document）{
 var app = document.querySelector（'＃app'）; 
 app.message ='这是从index.html脚本'设置的; 
 }）（文件）; 
< / script> 
  

JS Bin

I want to achieve communication between child parent with Polymer element.

Here my index.html

<proto-receiver data="my-coded-data">
        <proto-element data="my-child-coded-Data"></proto-element>
</proto-receiver>

Both element have their respective "data" property

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

In proto-receiver, which is the parent I update "data" by handling simple click

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


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

I want the change to be propagate to the child element as well, as it mentioned here.

I achieve this by passing a setter in my child element and called it like this. Which is, I guess, not the way it should be done.

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

What I'm doing wrong

Thanks

解决方案

To provide a concrete example to Scott Miles' comments, if you can wrap your parent and child elements in a Polymer template (such as dom-bind or as children to yet another Polymer element), then you can handle this declaratively. Check out the mediator pattern.

parent element:

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

child element:

<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

这篇关于元件之间的聚合物连通的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！