Ich habe eine Login-Komponente, und ich möchte den Login-Status für andere Komponenten in meiner Anwendung verfügbar machen.Polymer Inter-Komponente Datenbindung?
Kann jemand Arbeitscode oder Beispiele zur Verfügung stellen?
Ich brauche zumindest eine Art Bindung oder Ereignis, so dass sich die Benutzerschnittstelle dieser anderen interessierten Komponenten entsprechend aktualisieren kann, wenn sich der Anmeldestatus ändert.
Erstellen Sie eine Eigenschaft, die den Status in Ihrer Anmeldekomponente darstellt, und legen Sie notify: true fest. Verwenden Sie die Datenbindung in Ihrer Anmeldekomponente und anderen Komponenten, die diesen Status verwenden.
<login-component status="{{status}}"></login-component>
<other-component login="{{status}}"></other-component>
Wenn Sie die Komponenten außerhalb einer Polymer-Vorlage verwenden, die Verwendung von autobind machen, indem sie in einem <template is="dom-bind"> Verpackung.
<template is="dom-bind">
<login-component status="{{status}}"></login-component>
<other-component login="{{status}}"></other-component>
</template>
das scheint nicht zu funktionieren. Kannst du mich auf ein einfaches Beispiel verweisen, wo eine Komponente die Eigenschaft eines anderen sehen kann? – Janos
Leider scheint der Bindungsabschnitt in Polymer doc (https://www.polymer-project.org/1.0/docs/devguide/data-binding.html) nur über die Bindung innerhalb einer Komponente und nicht zwischen Komponenten zu sprechen. – Janos
siehe auch: http://stackoverflow.com/questions/23522037/data-binding-between-nested-polymer-elements – Janos
See this Plunker example (durch @nazerke) demonstriert eine Komponente ein anderes Eigentum zu beobachten.
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>
Danke, das Beispiel sieht interessant aus, ich werde versuchen, es ein wenig weiter zu bringen, indem ich einen Event-Handler hinzufüge, der die Eigenschaft einer Benutzeraktion ändert – Janos
können Sie verwenden <iron-meta>as described here:
<iron-meta key="info" value="foo/bar"></iron-meta>
...
meta.byKey('info').getAttribute('value').
oder
document.createElement('iron-meta').byKey('info').getAttribute('value');
oder
<template>
...
<iron-meta id="meta"></iron-meta>
...
this.$.meta.byKey('info').getAttribute('value');
....
</template>
Wenn ich nicht falsch liege, ist es eine Art Mechanismus zur Angabe von Schlüssel/Wertepaare, auf die von überall auf der Seite zugegriffen werden kann? – Janos
können Sie <iron-localstorage>as described here verwenden.
<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>
Dies wird den unglücklichen Nebeneffekt haben, dass der Wert über die Seitenladevorgänge hinweg erhalten bleibt, da Iron-Localstorage ein Wrapper um window.localStorage ist (ein Cookie-ähnlicher Schlüsselwertspeicher). Auch die Antwort erwähnt überhaupt nicht, wie es OPs Frage helfen würde, aber ich denke, dass es dabei war: man kann Eisen-Localstorage fast wie ein globales Objekt verwenden; Jede Komponente, die auf diesen globalen Zugriff zugreifen möchte, kann eine eiserne lokale Speicherung haben, und alle teilen diese Daten. – Verdagon
funktioniert addEventListener()? – dandavis
ich bin mir nicht sicher, wo ich das hinzufügen kann, sorry, kannst du das erklären? – Janos