Verwendung von Abhängigkeiten von Drittanbietern in Polymer (Pikadat)

Question

Ich erstelle einen Polymer-Datumsauswahl mit pikaday. Leider scheint es, dass ich etwas falsch gemacht habe.

Ich möchtepikaday.js und pikaday.cssden richtigen Weg importieren.

Zuerst hatte ich einen einfachen Skript-Tag unter meinem Abschluss dom-module -tag, wie

</dom-module> 
<script src="../../pikaday/pikaday.js"></script> 
<script> 
    Polymer({ 
    //.... 

Auf diese Weise wurde die Datepicker wie erwartet erstellt. Aber nach dieser SO-Thread Lesen ich hatte den Eindruck, ich sollte die js-Datei wie folgt importieren:

<link rel="import" href="../../paper-input/paper-input-behavior.html"> 
<link rel="import" href="../../paper-input/paper-input-error.html"> 
<link rel="import" href="../../pikaday/pikaday.js"> 
//more imports.... 

Aber nach „Fixierung“ meine Import, die Datei pikaday.js scheint nicht von innen meine Komponente sichtbar zu sein:

Darüber hinaus bin ich verwirrt über die Verwendung von externen CSS. Nach this guide Lesen scheint es, wie ich sollte & fügen Sie den Inhalt der bereitgestellten CSS-Datei in eine my-datepicker-style.html kopieren und ihn in meine Vorlage so zu importieren:

<dom-module id="my-datepicker"> 
    <template> 
    <style include="my-datepicker-style"></style> 
    <style> 
     :host { 
     //more css 

Ich bin verwirrt über die Notwendigkeit zu kopieren & vorhandenen Code einfügen.

Answer 1

Bis ES6-Importe häufiger sind, benötigen Sie eine Art Workaround zum Referenzieren von Abhängigkeiten.

Das Problem mit <script> Tag ist, dass wenn es mehrmals erscheint, wird es mehrmals verarbeitet werden. Dies gilt nicht für <link rel="import">. Same href wird nur einmal verarbeitet.

Sie können jedoch Javascript nicht direkt importieren. Der Trick ist, pikaday-import.html Datei mit dem Skript Referenz

<script src="../../pikaday/pikaday.js"></script> 

Sie dann, dass die <marked-element>uses

<link rel="import" href="pikaday-import.html" /> 
<dom-module id="my-datepicker"></dom-module> 

Dies ist die Technik zum Beispiel in Ihrem Element HTML importieren zu erstellen.

Auf diese Weise Instanzen von <my-datepicker> Last Pickaday nur einmal. Wenn es andere Komponenten gibt, die auf sie verweisen, könnten Sie die Abhängigkeit leider mehrfach laden.