Ich habe einen sehr einfachen Versuch, Papiermenü zu implementieren. Das gerenderte HTML stimmt jedoch nicht und unterbricht die Interaktion. Wenn Sie auf einen Menüeintrag klicken, wird die gesamte Liste ausgeblendet. Ich habe festgestellt, dass die Paper-Item-Elemente nicht in einem Key-Div innerhalb des Papiermenü-Elements gerendert werden.Polymerpapier-Menü HTML wird im Browser nicht korrekt dargestellt
Mein component.html sieht wie folgt aus:
<div>
<paper-menu selected="0">
<paper-item>Location 1</paper-item>
<paper-item>Location 2</paper-item>
</paper-menu>
</div>
Doch was gemacht wird, wie das ist:
<div>
<paper-menu role="menu" tabindex="0" selected="0" class="x-scope paper-menu-0">
<div class="selectable-content style-scope paper-menu">
</div>
<paper-item role="option" tabindex="0" aria-disabled="false" class="x-scope paper-item-0">Location 1</paper-item>
<paper-item role="option" tabindex="0" aria-disabled="false" class="x-scope paper-item-0">Location 2</paper-item>
</paper-menu>
</div>
Wenn ich manipulieren die gerenderte HTML im Browser so die enge div-Tag richtig wickelt die Paper-Element-Elemente, die Interaktion funktioniert.
Was mache ich falsch?
In meiner index.html Ich habe:
<script src="lib/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="lib/paper-button/paper-button.html" />
<link rel="import" href="lib/paper-input/paper-input.html" />
<link rel="import" href="lib/paper-item/paper-item.html" />
<link rel="import" href="lib/paper-menu/paper-menu.html" />
<link rel="import" href="lib/paper-listbox/paper-listbox.html" />
<link rel="import" href="lib/paper-toggle-button/paper-toggle-button.html" />
<link rel="import" href="lib/paper-progress/paper-progress.html" />
<link rel="import" href="lib/paper-dropdown-menu/paper-dropdown-menu.html" />
Und in meinem bower.json Ich Bezugnahme auf die folgenden Versionen
{
"name": "permit-manager-app",
"private": true,
"dependencies": {
"polymer": "^1.4.0",
"webcomponentsjs": "^0.7.22",
"paper-button": "^1.0.11",
"paper-input": "^1.1.10",
"paper-progress": "^1.0.9",
"paper-dropdown-menu": "1.2.1",
"paper-menu": "1.2.2",
"paper-item": "1.2.1",
"paper-listbox": "1.1.2",
"paper-toggle-button": "^1.1.2"
}
}
Und das ist Angular2 Beta 17
STOSS: Ich gehackt das Problem, indem explizit die Papier-Positionsliste mit dem erwarteten div-Tag wickeln. Das Ergebnis ist, dass das gerenderte HTML nun 2 div Elemente hat. 1 leer, das nichts tut und eine Sekunde, die den erforderlichen Container bereitstellt und dann die Komponente wie erwartet funktioniert. Immer noch auf der Suche nach einer Erklärung für das Problem und die Auflösung der Quelle. – Jessel