Liaison de données inter-composants de polymères?

J'ai un composant de connexion, et j'aimerais que l'état de connexion soit disponible pour d'autres composants dans ma application.

Quelqu'un peut-il fournir un code de travail ou des exemples?

J'ai besoin d'une sorte de liaison ou d'événement au moins, de sorte que lorsque le statut de connexion change, l'interface utilisateur de ces autres composants intéressés peut être mise à jour en conséquence.

Créez une propriété qui représente l'état dans votre composant de connexion et définissez notify: true . Utilisez la liaison de données dans votre composant de connexion et tous les autres composants qui utilisent ce statut.

 <login-component status="{{status}}"></login-component> <other-component login="{{status}}"></other-component>

Si vous utilisez vos composants en dehors d'un modèle de polymère, faites appel à un automind en les enveloppant dans un <template is="dom-bind"> .

 <template is="dom-bind"> <login-component status="{{status}}"></login-component> <other-component login="{{status}}"></other-component> </template>

Vous pouvez utiliser <iron-localstorage> comme décrit ici .

 <dom-module id="ls-sample"> <iron-localstorage name="my-app-storage" value="{{cartoon}}" on-iron-localstorage-load-empty="initializeDefaultCartoon" ></iron-localstorage> </dom-module> <script> Polymer({ is: 'ls-sample', properties: { cartoon: { type: Object } }, // initializes default if nothing has been stored initializeDefaultCartoon: function() { this.cartoon = { name: "Mickey", hasEars: true } }, // use path set api to propagate changes to localstorage makeModifications: function() { this.set('cartoon.name', "Minions"); this.set('cartoon.hasEars', false); } }); </script>

Voir cet exemple de Plunker (par @nazerke ) démontrant qu'un composant observe la propriété d'un autre.

http://plnkr.co/edit/p7R8BqJJfoYMVA3t3DbX?p=preview

Index.html

 <!DOCTYPE html> <html lang="en"> <head> <script src="http://www.polymer-project.org/1.0/samples/components/webcomponentsjs/webcomponents-lite.min.js"></script> <link rel="import" href="parent-element.html"> <link rel="import" href="first-child.html"> <link rel="import" href="second-child.html"> </head> <body> <parent-element></parent-element> </body> </html>

Parent-element.html

 <link rel="import" href="http://www.polymer-project.org/1.0/samples/components/polymer/polymer.html"> <dom-module id="parent-element"> <template> <first-child prop={{value}}></first-child> <second-child feat1={{prop}}></second-child> In parent-element <h1>{{value}}</h1> </template> <script> Polymer({ is: "parent-element", properties: { value: { type: String } }, valueChanged: function() { console.log("value changed"); } }); </script> </dom-module>

Premier enfant.html

 <link rel="import" href="http://www.polymer-project.org/1.0/samples/components/polymer/polymer.html"> <dom-module id="first-child"> <template> <p>first element.</p> <h2>{{prop}}</h2> </template> <script> Polymer({ is: "first-child", properties: { prop: { type: String, notify: true } }, ready: function() { this.prop = "property"; } }); </script> </dom-module>

Deuxième enfant.html

 <link rel="import" href="http://www.polymer-project.org/1.0/samples/components/polymer/polymer.html"> <dom-module id="second-child"> <template> <p>Second element.</p> <h2>{{feat1}}</h2> </template> <script> Polymer({ is: "second-child", properties: { feat1: { type: String, notify: true, value: "initial value" } }, ready: function() { this.addEventListener("feat1-changed", this.myAct); }, myAct: function() { console.log("feat1-changed ", this.feat1); } }); </script> </dom-module>

Vous pouvez utiliser <iron-meta> comme décrit ici :

 <iron-meta key="info" value="foo/bar"></iron-meta> ... meta.byKey('info').getAttribute('value').

 document.createElement('iron-meta').byKey('info').getAttribute('value');

 <template> ... <iron-meta id="meta"></iron-meta> ... this.$.meta.byKey('info').getAttribute('value'); .... </template>