Comment partager des données entre deux éléments en polymère 2.0

je les éléments suivants, qui a simplement un attribut, l'élément qui définit lui-même:Comment partager des données entre deux éléments en polymère 2.0

<link rel="import" href="../polymer/polymer-element.html"> 

<dom-module id="test-element-1"> 
    <template> 
    <style> 
     :host { 
     display: block; 
     } 
    </style> 
    <h2>Hello [[prop1]]!</h2> 
    </template> 

    <script> 
    /** 
    * `test-element-1` 
    * Test Element 1 
    * 
    * @customElement 
    * @polymer 
    * @demo demo/index.html 
    */ 
    class TestElement1 extends Polymer.Element { 
     static get is() { return 'test-element-1'; } 
     static get properties() { 
     return { 
      prop1: { 
      type: String, 
      value: 'test-element-1', 
      notify: true, 
      readOnly: true 
      } 
     }; 
     } 
    } 

    window.customElements.define(TestElement1.is, TestElement1); 
    </script> 
</dom-module>

et je voudrais un deuxième élément de pouvoir utiliser les mêmes données:

<link rel="import" href="../polymer/polymer-element.html"> 

<dom-module id="test-element-2"> 
    <template> 
    <style> 
     :host { 
     display: block; 
     } 
    </style> 
    <h2>Hello [[prop1]]!</h2> 
    </template> 

    <script> 
    /** 
    * `test-element-2` 
    * Test Element 2 
    * 
    * @customElement 
    * @polymer 
    * @demo demo/index.html 
    */ 
    class TestElement2 extends Polymer.Element { 
     static get is() { return 'test-element-2'; } 
     static get properties() { 
     return { 
      prop1: { 
      type: String, 
      notify: false, 
      readOnly: false 
      } 
     }; 
     } 
    } 

    window.customElements.define(TestElement2.is, TestElement2); 
    </script> 
</dom-module>

Je voudrais test élément 2 pour être en mesure d'obtenir la valeur de prop1 de test élément 1:

<!doctype html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes"> 

    <title>test-element-2 demo</title> 

    <script src="../../webcomponentsjs/webcomponents-lite.js"></script> 

    <link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html"> 
    <link rel="import" href="../../iron-demo-helpers/demo-snippet.html"> 
    <link rel="import" href="../test-element-2.html"> 
    <link rel="import" href="../../test-element-1/test-element-1.html"> 

    <custom-style> 
     <style is="custom-style" include="demo-pages-shared-styles"> 
     </style> 
    </custom-style> 
    </head> 
    <body> 
    <div class="vertical-section-container centered"> 
     <h3>Basic test-element-2 demo</h3> 
     <demo-snippet> 
     <template> 
      <test-element-1 prop1="{{prop1Value}}"></test-element-1> 
      <test-element-2 prop1="{{prop1Value}}"></test-element-2> 
     </template> 
     </demo-snippet> 
    </div> 
    </body> 
</html>

Voici la sortie de ma démo:

Qu'est-ce que je fais de mal?

Source

2017-09-14 Big Ali

Vous pouvez créer un nouveau composant, disons test-elements-wrapper, pour les inclure tous les deux et garder la valeur en synchronisation, et dans votre page vous incluez ce wrapper, pas les deux éléments individuels – mishu

Étant donné que vous utilisez index.html ou toute autre page HTML pour afficher la valeur des éléments en polymère, vous ne pouvez pas lier la valeur prop1Value.

Si vous faites la même chose en utilisant un polymer-element, alors cela fonctionnera définitivement.

Une propriété est déclarée implicitement si vous ajoutez à une liaison de données ou ajouter comme une dépendance d'un observateur, propriété calculée ou calculée obligatoire.

Le polymère crée automatiquement des paramètres pour ces propriétés déclarées implicitement. Cependant, les propriétés déclarées implicitement ne peuvent pas être configurées à partir du balisage.

Source

2017-09-14 23:57:20 Ofisora

La question est expliquée par @Osifara, si vous voulez partager la propriété avec des composants enfants dont vous avez besoin pour rendre le parent de haut niveau un webcomponent, vous devez faire quelque chose comme ceci:

<body> 
    ......the other code 

    <dom-module id="my-index"> 
     <template> 
      <demo-snippet> 
       <template> 
        <test-element-1 prop1="{{propIndexTest}}"></test-element-1> 
        <test-element-2 prop1="{{propIndexTest}}"></test-element-2> 
       </template> 
      </demo-snippet> 
     </template> 
    </dom-module> 
    <my-index></my-index> 
    ......the other code 
</body> 
<script> 
    class MyIndex extends Polymer.Element { 
     static get is() { 
      return 'my-index'; 
     } 
     static get properties() { 
      return { 
       propIndexTest: { 
        type: String, 
        value: 'We are sharing the same value' 
        notify: false 
       } 
      }; 
     } 
    } 

    window.customElements.define(MyIndex.is, MyIndex); 
</script>

Alors maintenant devient votre conteneur parent de niveau supérieur et vous pouvez utiliser le Polymer pour travailler avec cela.

Source

2017-09-18 22:25:49

Comment partager des données entre deux éléments en polymère 2.0

Répondre

Questions connexes