Ho un componente di accesso e mi piacerebbe rendere lo stato di accesso disponibile per altri componenti nella mia applicazione.Collegamento dati inter-componente polimerico?
Qualcuno può fornire codice di lavoro o esempi?
Ho bisogno di qualche tipo di binding o eventing almeno, in modo che quando lo stato di login cambia, l'interfaccia utente di questi altri componenti interessati può essere aggiornata di conseguenza.
Creare una proprietà che rappresenta lo stato nel componente di accesso e impostare notify: true. Utilizzare l'associazione dati nel componente di accesso e in qualsiasi altro componente che utilizza tale stato.
<login-component status="{{status}}"></login-component>
<other-component login="{{status}}"></other-component>
Se si utilizzano i componenti al di fuori di un modello di Polymer, fare uso di bind automatico avvolgendoli in un <template is="dom-bind">.
<template is="dom-bind">
<login-component status="{{status}}"></login-component>
<other-component login="{{status}}"></other-component>
</template>
questo non sembra funzionare. puoi riferirmi ad un semplice esempio in cui un componente può vedere la proprietà di un altro? – Janos
sfortunatamente la sezione di binding in Polymer doc (https://www.polymer-project.org/1.0/docs/devguide/data-binding.html) sembra parlare solo del binding all'interno di un componente, e non tra i componenti. – Janos
vedere anche: http://stackoverflow.com/questions/23522037/data-binding-between-nested-polymer-elements – Janos
See this Plunker example (da @nazerke) dimostrando un componente osservando proprietà di un altro.
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>
<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>
<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>
<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>
Grazie, l'esempio sembra interessante, proverò a fare un po 'di più aggiungendo qualche gestore di eventi che cambierebbe la proprietà guidata da un'azione utente – Janos
È possibile utilizzare <iron-meta>as described here:
<iron-meta key="info" value="foo/bar"></iron-meta>
...
meta.byKey('info').getAttribute('value').
o
document.createElement('iron-meta').byKey('info').getAttribute('value');
o
<template>
...
<iron-meta id="meta"></iron-meta>
...
this.$.meta.byKey('info').getAttribute('value');
....
</template>
se non sbaglio, è un tipo di meccanismo per specificare la chiave/coppie di valori a cui è possibile accedere da qualsiasi punto della pagina? – Janos
È possibile utilizzare <iron-localstorage>as described here.
<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>
Questo avrà lo sfortunato effetto collaterale di persistere il valore tra i carichi di pagina, poiché iron-localstorage è un wrapper attorno a window.localStorage (un'archiviazione di valori-chiave simile a un cookie). Inoltre, la risposta non menziona affatto come potrebbe essere d'aiuto la domanda di OP, ma penso che si stia arrivando a questo: si può usare iron-localstorage quasi come un oggetto globale; ogni componente che vuole accedere a questo globale può avere un iron-localstorage e tutti condivideranno tali dati. – Verdagon
fa addEventListener() funziona? – dandavis
non so dove aggiungere che mi dispiace, puoi spiegare? – Janos