Communication de polymère entre les éléments

Question

Je souhaite établir une communication entre un parent enfant et un élément Polymer.

Voici mon index.html

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

Les deux éléments ont leurs "données" propriété

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

Dans proto-récepteur, qui est le parent mettre à jour "données" par manipulation simple clic

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


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

Je souhaite que la modification soit également propagée à l'élément enfant, car elle mentio nd here. Je l'ai fait en passant un setter dans mon élément enfant et l'ai appelé comme ceci. Ce qui est, je suppose, pas la façon dont cela devrait être fait.

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

Ce que je fais mal

Merci

MISE À JOUR:

Pour ceux qui viennent ici la bonne façon de le faire est en utilisant des événements.

Polymer 1.x

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

Polymer 2.x (javascript simples)

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

Dans les deux cas, le récepteur doit mettre en œuvre la addEventListener régulière

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

Answer 1

Pour donner un exemple concret à Scott Miles 'commentaires , si tu Vous pouvez envelopper vos éléments parents et enfants dans un modèle Polymer (tel que dom-bind ou en tant qu'enfants d'un autre élément Polymer), vous pouvez gérer cela de façon déclarative. Découvrez le mediator pattern.

élément parent:

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

élément enfant:

<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

Answer 2

je faisais face même question et g ot solution pour elle et fixé comme ci-dessous

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

Vous pouvez consulter ces signaux-fer vous obtiendrez la solution que vous cherchez son feu d'événement essentiellement de tout élément à un autre

Espérons que cela aidera Vous Polymer iron signals