Mit Polymer 1.0 habe ich ein Layout für Papierkassetten erstellt. In der Schublade habe ich ein Menü mit Papiermenü mit Papierartikeln, die an die Eisenseiten gebunden sind. Ich nahm dieses Beispiel von Content Switcheroo with Core-Pages -- Polycasts #09 und wandelte es um, um die Polymer 1.0 Elemente zu verwenden. In dem unten stehenden Code siehst du meinen kommentierten Abschnitt, in dem die Papierelemente fest codiert sind. Das funktioniert gut.Polymer 1.0: Verwenden von Vorlage dom-repeat innerhalb von Papiermenüelementen zum Anzeigen von Eisenseiten bei Auswahl
Mein nächster Schritt war zu versuchen, mein Menü dynamisch zu erstellen, indem Sie das Element <template is="dom-repeat"> verwenden, um über ein beliebiges Array von Menüelementen zu iterieren. Das Menü wird korrekt gerendert (ich kann alle Menüelemente sehen, die an das Array gebunden sind), aber ich kann nicht auf die Elemente klicken, und es werden keine Iron-Pages angezeigt. Es scheint, dass das Datenkategorieattribut, das für attr-for-selected verwendet wird, in <template is="dom-repeat"> nicht funktioniert.
Auf welche Weise kann ich das zum Funktionieren bringen? Bearbeiten: Entfernen der Attr-für-ausgewählte Attribute und Umschalten der Eisen-Seiten mit dem Index arbeiten, aber auf den Index des Arrays angewiesen ist keine Option in meiner Situation.
Meine index.html ist wie folgt:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>My Test</title>
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/iron-icons/iron-icons.html">
<link rel="import" href="bower_components/iron-pages/iron-pages.html">
<link rel="import" href="bower_components/paper-drawer-panel/paper-drawer-panel.html">
<link rel="import" href="bower_components/paper-toolbar/paper-toolbar.html">
<link rel="import" href="bower_components/paper-header-panel/paper-header-panel.html">
<link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="bower_components/paper-item/paper-item.html">
<link rel="import" href="bower_components/paper-styles/paper-styles.html">
<link rel="import" href="bower_components/paper-menu/paper-menu.html">
<style>
</style>
</head>
<body>
<my-app></my-app>
<dom-module id="my-app">
<style>
</style>
<template>
<paper-drawer-panel>
<paper-header-panel drawer class="fit">
<paper-toolbar>
<div>Drawer</div>
</paper-toolbar>
<paper-menu class="content fit" selected="{{page}}" attr-for-selected="data-category">
<!-- This works -->
<!--
<paper-item data-category="item1" label="item1">
<span>John Smith</span>
</paper-item>
<paper-item data-category="item2" label="item2">
<span>Jane Doe</span>
</paper-item>
-->
<!-- This does not work -->
<template is="dom-repeat" items="{{names}}">
<paper-item data-category="{{item.itemNum}}" label="{{item.itemNum}}">
<span>{{item.first}}</span><span>{{item.last}}</span><span>{{item.itemNum}}</span>
</paper-item>
</template>
</paper-menu>
</paper-header-panel>
<paper-header-panel main class="fit">
<paper-toolbar>
<paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
<div class="flex">Main Content</div>
</paper-toolbar>
<iron-pages selected="{{page}}" attr-for-selected="data-category">
<section data-category="item1">
<h1>Item 1</h1>
<div>Item 1 content...</div>
</section>
<section data-category="item2">
<h1>Item 2</h1>
<div>Item 2 content...</div>
</section>
</iron-pages>
</paper-header-panel>
</paper-drawer-panel>
</template>
<script>
Polymer({
is: "my-app",
ready: function() {
this.names = [{itemNum: "item1", first: "John", last: "Smith"}, {itemNum: "item2", first: "Jane", last: "Doe"}];
}
});
</script>
</dom-module>
</body>
</html>
Ist dom-Wiederholung an anderer Stelle im Ort zu arbeiten? –
dom-repeat funktioniert in diesem Beispiel. Die Papierstücke werden angezeigt, aber nichts passiert, wenn ich auf die Gegenstände klicke. Es scheint, dass nur das Attribut 'Datenkategorie' nicht funktioniert. –