2016-08-09 3 views
2

Я создаю полимерный дампинг, используя pikaday. К сожалению, похоже, что у меня что-то не так.Использование сторонних зависимостей в полимере (пикадате)

Я хотел бы импортировать pikaday.js и pikaday.cssвправо.

Сначала я был простой сценарий тег ниже моей закрытия dom-module в тег, как

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

Таким образом, DatePicker была создана, как и ожидалось. Но после прочтения этой SO-Thread я был под впечатлением, я должен был импортировать JS-файла, как это:

<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.... 

Но после «фиксации» мой импорт, файл pikaday.js, кажется, не видно изнутри моего компонента:

Uncaught ReferenceError: Pikaday is not defined 

Кроме того, я смущен в использовании внешних css. После прочтения this guide кажется, что я должен был скопировать & вставить содержимое прилагаемого CSS-файл в my-datepicker-style.html и импортировать его в свой шаблон, как это:

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

Я запутался о необходимости копировать & паста существующий код.

ответ

3

До тех пор, пока импорт ES6 не будет более распространенным, вам потребуется какое-то обходное решение для ссылок на зависимости.

Проблема с тегом <script> заключается в том, что когда он появляется несколько раз, он будет обрабатываться несколько раз. Это не относится к <link rel="import">. Тот же самый href будет обрабатываться только один раз.

Вы не можете, однако, импортировать javascript напрямую. Хитрость заключается в том, чтобы создать pikaday-import.html файл со ссылкой сценария

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

затем импортирован, что в HTML вашего элемента

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

Это техника, например, <marked-element>uses.

В этом случае экземпляры <my-datepicker> загружают pickaday только один раз. К сожалению, если есть другие компоненты, которые ссылаются на него, вы можете в конечном итоге загрузить зависимость несколько раз.

+1

Работает как шарм. Большое спасибо. – samjaf

Смежные вопросы