0
Ok. Dies ist meine letzte Zuflucht, bis ich den Tisch umgedreht habe und mich von Polymer für immer verabschiedet habe. Ich habe in den letzten 3 Tagen versucht, ein paar grundlegende Dinge in Polymer zu tun, aber ich war dazu nicht in der Lage. Zwischen dem Einbinden einiger Papierelemente und dem Caching (das anscheinend nicht einmal die Chrome-Toolbox außer Kraft setzt) weiß ich nicht, wer mir am meisten Kopfzerbrechen bereitet. Es gibt auch keine Möglichkeit für mich, das Projekt zu debuggen. Enough rant ...Polymerelemente funktionieren nicht richtig, auch nachdem die Dacheindeckung neu installiert wurde
Ich fing an, endlich die Bibliothek zu begreifen, bis ich versuchte, die <paper-dropdown-menu> und ein benutzerdefiniertes Element von Github heruntergeladen: <simple-slider>.
Simple Slider scheint nicht zu funktionieren (zeigt das Karussell nicht korrekt), und Papier-Dropdown-Menü wählt das Element nicht aus.
Alle Abhängigkeiten wurden erfolgreich referenziert (Überprüfung mit Visual Studio Code), und das webComponents polyfill ist ebenfalls enthalten.
Hier sind meine Haupt .html-Dateien:
<!doctype html>
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="generator" content="Polymer Starter Kit">
<title>Polymer Starter Kit</title>
<!-- Place favicon.ico in the `app/` directory -->
<!-- Chrome for Android theme color -->
<meta name="theme-color" content="#2E3AA1">
<!-- Web Application Manifest -->
<link rel="manifest" href="manifest.json">
<!-- Tile color for Win8 -->
<meta name="msapplication-TileColor" content="#3372DF">
<!-- Add to homescreen for Chrome on Android -->
<meta name="mobile-web-app-capable" content="yes">
<meta name="application-name" content="PSK">
<link rel="icon" sizes="192x192" href="images/touch/chrome-touch-icon-192x192.png">
<!-- Add to homescreen for Safari on iOS -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Polymer Starter Kit">
<link rel="apple-touch-icon" href="images/touch/apple-touch-icon.png">
<!-- Tile icon for Win8 (144x144) -->
<meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">
<!-- build:css styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild-->
<!-- build:js bower_components/webcomponentsjs/webcomponents-lite.min.js -->
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<!-- endbuild -->
<!-- Because this project uses vulcanize this should be your only html import
in this file. All other imports should go in elements.html -->
<link rel="import" href="elements/elements.html">
<!-- For shared styles, shared-styles.html import in elements.html -->
<style is="custom-style" include="shared-styles"></style>
</head>
<body unresolved>
<!-- build:remove -->
<span id="browser-sync-binding"></span>
<!-- endbuild -->
<template is="dom-bind" id="app">
<pgarena-navbar></pgarena-navbar>
<simple-slider style="width:100%; height:500px" auto-play="true">
<img src="https://placehold.it/350x150"/>
<img src="https://placehold.it/350x150"/>
<img src="https://placehold.it/350x150"/>
</simple-slider>
<div class="container">
<paper-dropdown-menu label="Dinosaurs">
<paper-listbox class="dropdown-content">
<paper-item>allosaurus</paper-item>
<paper-item>brontosaurus</paper-item>
<paper-item>carcharodontosaurus</paper-item>
<paper-item>diplodocus</paper-item>
</paper-listbox>
</paper-dropdown-menu>
<pgarena-tournament-card>
</pgarena-tournament-card>
<pgarena-tournament-card>
</pgarena-tournament-card>
<pgarena-tournament-card>
</pgarena-tournament-card>
<pgarena-tournament-card>
</pgarena-tournament-card>
</div>
<!-- Uncomment next block to enable Service Worker support (1/2) -->
<!--
<paper-toast id="caching-complete"
duration="6000"
text="Caching complete! This app will work offline.">
</paper-toast>
<platinum-sw-register auto-register
clients-claim
skip-waiting
base-uri="bower_components/platinum-sw/bootstrap"
on-service-worker-installed="displayInstalledToast">
<platinum-sw-cache default-cache-strategy="fastest"
cache-config-file="cache-config.json">
</platinum-sw-cache>
</platinum-sw-register>
-->
</template>
<!-- build:js scripts/app.js -->
<script src="scripts/app.js"></script>
<!-- endbuild-->
</body>
</html>
Elements.html:
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<!-- Iron elements -->
<link rel="import" href="../bower_components/iron-flex-layout/iron-flex-layout.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/iron-selector/iron-selector.html">
<!-- Paper elements -->
<link rel="import" href="../bower_components/paper-drawer-panel/paper-drawer-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-material/paper-material.html">
<link rel="import" href="../bower_components/paper-menu/paper-menu.html">
<link rel="import" href="../bower_components/paper-scroll-header-panel/paper-scroll-header-panel.html">
<link rel="import" href="../bower_components/paper-styles/typography.html">
<link rel="import" href="../bower_components/paper-toast/paper-toast.html">
<link rel="import" href="../bower_components/paper-toolbar/paper-toolbar.html">
<link rel="import" href="../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
<!-- App Elements -->
<link rel="import" href="../bower_components/app-layout/app-toolbar/app-toolbar.html">
<!-- Custom Elements -->
<link rel="import" href="pgarena-navbar/pgarena-navbar.html">
<link rel="import" href="pgarena-container/pgarena-container.html">
<link rel="import" href="pgarena-tournament-card/pgarena-tournament-card.html">
<!-- 3rd Party Non Google -->
<link rel="import" href="../bower_components/polymer-simple-slider/src/simple-slider.html">
<!-- Uncomment next block to enable Service Worker Support (2/2) -->
<!--
<link rel="import" href="../bower_components/platinum-sw/platinum-sw-cache.html">
<link rel="import" href="../bower_components/platinum-sw/platinum-sw-register.html">
-->
<!-- Configure your routes here -->
<link rel="import" href="routing.html">
<!-- Add your elements here -->
<link rel="import" href="../styles/app-theme.html">
<link rel="import" href="../styles/shared-styles.html">
<link rel="import" href="my-greeting/my-greeting.html">
<link rel="import" href="my-list/my-list.html">
BTW: ich alle Bower Pakete versucht Neuinstallation, aber es hat nicht funktioniert. Versucht, das neueste Polymer in den bower_components-Ordner zu entpacken und hat nicht funktioniert.
Irgendwelche Ideen? Ich kann nicht glauben, dass es so schmerzhaft war zu benutzen.
AAAAAAAAAAAAAAAAAAAAAAAAAaaaaaaargh. Mir fehlte die Papier-Listbox @ _ @. tony, ich würde gerne die Gelegenheit nutzen und Sie um Tipps oder Empfehlungen bitten, wenn Sie mit Polymer arbeiten. Wie hast du es gelernt? Auf eine Randnotiz, danke, dass Sie mich wissen lassen, dass das Modul für 0,2 ist. Ich werde es nicht aktualisieren, da ich lieber etwas anderes implementieren würde (vorzugsweise mit Hintergrundbild und CSS, damit ich die "Cover" -Eigenschaft der Hintergrundgröße nutzen kann). Vielen Dank.!!! –
BTW, wissen Sie, wie kann ich sicher sein, dass Google Chrome die HTML-Importe nicht erfasst?Ich habe eine Einstellung in den Entwicklertools deaktiviert (Cache deaktivieren, während DevTools geöffnet ist) –
Ich bin froh, dass das geholfen hat. Neben dem Lesen der Dokumente habe ich Polymer durch Experimentieren gelernt und die Quelle einzelner Elemente und deren Demos kennengelernt. Ich benutze Webstorm, mit dem ich mit STRG-Klick schnell in die Quelle springen kann. Bevor es [Polymer App Toolbox] (https://www.polymer-project.org/1.0/toolbox/) gab, fand ich [yeoman] (https://github.com/yeoman/generator-polymer) hilfreich, und Dann kam [PSK] (https://github.com/PolymerElements/polymer-starter-kit) (das Sie anscheinend verwenden). – tony19