Rendern Sie ein content-tag als Teil einer Vorlage in polymer und dart
Möchte ich eine generische Liste mit polymer und dart. Ich bin Verlängerung der UL-element zu tun. Ich möchte statt template-Variablen innerhalb der Inhalt dieses benutzerdefinierte element.
<ul is="data-ul">
<li>{{item['first_name']}}</li>
</ul>
Sich das benutzerdefinierte element
<polymer-element name="data-ul" extends="ul">
<template repeat="{{item in items}}">
<content></content>
</template>
<script type="application/dart" src="data-ul.dart"></script>
</polymer-element>
Ich hatte erwartet, die template-Variablen werden interpoliert, aber es wird einfach ausgegeben, um den DOM so wie er ist. Wie kann ich die Ausgabe der content-tag gerendert werden kann als Vorlage und nicht direkt ausgegeben?
- Ich habe den Eindruck, Sie versuchen, zu erreichen, die-genau wie ich-mit einem anderen Ansatz. Siehe Frage template Ändern-content zur Laufzeit. Ich habe versucht, Ihr Versuch, ohne Erfolg zu.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Leider gibt es hier zwei Probleme.
<content>
kann nicht verwendet werden, wie diese. Es ist ein Platzhalter für das rendering Licht-DOM-Knoten an bestimmten Orten in der Shadow DOM. Die ersten<content>
die Auswahl der Knoten, wins - [ Eins ]. Stanzen aus einem Haufen wie Sie tun, während Sie sehr intuitiv ist, funktioniert nicht wie erwartet.Sie mischen die innere Welt von Polymer mit der äußeren Welt, außerhalb des Elements. Was dies wirklich bedeutet, ist, dass Bindungen (z.B.
{{}}
) funktionieren nur im Kontext der<polymer-element>
.Eine Sache, die Sie tun können, ist, erstellen Sie eine Kopie der verteilten Licht-DOM-Kinder, wie die
items
- Eigenschaft des Elements. In JavaScript sieht dies wie:Hinweis: Der einzige Grund, warum ich verwendet habe
<content select="li">
ist, um sicherzustellen, das element nimmt nur in<li>
Knoten. Wenn Sie nicht besorgt über die Nutzer mit anderen Typen von Elementen, verwenden Sie einfachthis.items = [].slice.call(this.children);
.this.$.content
(es ist nicht definiert), wenn es NICHT innerhalb der<template>
element. Können Sie ACK, das?Zu tun, die Sie überschreiben sollten, die
parseDeclaration
Methode. Diese Methode ist zuständig für das Parsen/erzeugen der benötigten html-gebunden werden. Lassen Sie zum Beispiel sagen, dass du die nächste VorlageOder wenn Sie möchten, haben einige Standard-Elemente:
dann sollten Sie bei der nächsten Klasse:
Und schließlich verwenden Sie das custom-element wie folgt: