Daten-Bindung zwischen den verschachtelten polymer-Elemente
Angenommen ich habe zwei verschiedene polymer-elements
Man sollte eingebettet werden in den anderen mit der content
Platzhalter.
Ist es möglich zu tun, Daten-Bindung zwischen diesen zwei geschachtelte polymer-elements
?
Habe ich versucht, aber ich kann nicht ankommen es zu wirken: http://jsbin.com/IVodePuS/11/
Laut http://www.polymer-project.org/articles/communication.html#binding Daten-Bindung zwischen polymer-elements
funktionieren sollte (in diesen Beispielen wurden Sie in der template
tag ohne ein content
Platzhalter).
Update:
Scott Miles klargestellt, dass die Datenbindung funktioniert nur auf der template
Ebene.
Aber in meinem Fall ich don T wissen, die genaue template
vorher aber möchte ich dem Benutzer erlauben, meine parent-element
angeben, welche child-element
es enthalten sollte (vorausgesetzt, es gibt verschiedene child-elements
.
Ich denke, diese Frage ist damit verbunden: Mit Vorlage definiert im Licht-dom im inneren ein Polymer-element
Ich aktualisiert das Beispiel unten, um zu markieren sein:
<polymer-element name="parent-element" >
<template >
<div>Parent data: {{data1}} </div>
<content />
</template>
<script>
Polymer('parent-element', {
data1 : '',
ready: function() {
this.data='parent content';
}
});
</script>
</polymer-element>
<polymer-element name="child-element" attributes="data2">
<template>
<div>Parent data: {{data2}} </div>
</template>
<script>
Polymer('child-element', {
data2 : '',
ready: function() {
}
});
</script>
</polymer-element>
<polymer-element name="child2-element" attributes="data2">
<template>
<div>Parent data: {{data2}} </div>
</template>
<script>
Polymer('child2-element', {
data2 : '',
ready: function() {
}
});
</script>
</polymer-element>
Kann der Benutzer wählen, welche child-element
einbetten:
<parent-element data1 = "test">
<child-element data2="{{data1}}"/>
</parent-element>
<parent-element data1 ="test" >
<child2-element data2="{{data1}}"/>
</parent-element>
Problemumgehung:
Ist die einzige Lösung, die ich fand, war das hinzufügen change watcher
und verwenden getDistributedNodes()
um das Kind-element, und legen Sie manuell data2
zu data
:
<polymer-element name="parent-element" >
<template >
<div>Parent data: {{data}} </div>
<content id="content"/>
</template>
<script>
Polymer('parent-element', {
data : '',
ready: function() {
this.data='parent content';
},
dataChanged : function() {
contents = this.$.content.getDistributedNodes();
if (contents.length > 0) {
contents[0].data2 = this.data;
}
},
});
</script>
</polymer-element>
InformationsquelleAutor | 2014-05-07
Du musst angemeldet sein, um einen Kommentar abzugeben.
Polymer-Datenbindung arbeitet, indem er ein Modell für einen ganzen Teilbaum.
Sie schrieb:
dies bedeutet in der Regel, dass die parentNode bietet die binding-Modell. Aber nun stellen Sie sich vor, Sie wollten schreiben:
Nun haben Sie ein problem.
Statt, in der Polymer-Beispielen, werden Sie feststellen, dass die
{{}}
sind (fast immer) innerhalb einer Vorlage. Wenn ich zum Beispiel definieren:Nun, ich habe einen model-Kontext (
host-element
), dass ich verwenden können, binden Dinge zusammen, die in der gesamten Unterbaum beschrieben, die durch die Vorlage.Beachten Sie, dass brauche ich nicht
attributes="data"
für diese zu arbeiten. Ich fügte hinzu, dass, damit host-element stelltdata
und ich kann dies tun:http://jsbin.com/IVodePuS/15/edit
Element Nutzung muss nie Folgen Erklärung. Wo sind Sie testen? Getestet habe ich es in Chrome 34, 29 FF, IE 11 und es funktionierte gut, wie Sie ist.
Mein Fehler. Etwas funky mit meinem Rechner. Post crash & reboot, das jsbin perfekt funktioniert auf Chrome 35, wo ich es lief vor.
Vielen Dank @ScottMiles für das feedback. Aber meinen speziellen Anwendungsfall ist, dass ich don T wissen, die genaue Vorlage, die während der design-Zeit, aber nur während runtine. Vorstellen, ich habe zwei verschiedene
child-elements
und ich will die user meinerparent-element
zu wählenchild-element
verwendet werden soll. Ich aktualisiert die Frage.sheesh polymer ist einfach so Komplex, yuk
InformationsquelleAutor Scott Miles
Funktioniert wie ein Charme. Übergeordnetes element ist die Veröffentlichung Eigenschaft von Daten, kann per 2-Wege-Daten gebunden. Auf diese Weise das Kind-element bekommt die gleichen Daten.
InformationsquelleAutor zdarsky.peter
Denke ich in der Polymer - >= 1.0 dies sollte getan werden mit "Auto-verbindliche Vorlage".
InformationsquelleAutor T. Roggendorf