我正在使用pikaday创建一个聚合物日期选择器。可悲的是我好像出了点问题。
我想以正确的方式导入pikaday.js
和pikaday.css
。
一开始,我在关闭的dom-module
-tag下面有一个简单的脚本标签,例如
</dom-module>
<script src="../../pikaday/pikaday.js"></script>
<script>
Polymer({
//....
这样,按预期方式创建了日期选择器。但是在阅读了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
我对复制和粘贴现有代码的需求感到困惑。
最佳答案
在更常见的是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>
实例仅加载一天一次。不幸的是,如果还有其他引用它的组件,最终可能会多次加载依赖项。