我正在使用 pikaday 创建 polymer 日期选择器.可悲的是,我好像做错了什么。
我想导入 pikaday.js
和 pikaday.css
正确的方式。
起初我在结束 dom-module
标签下面有一个简单的脚本标签,比如
</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>
的问题tag是当它出现多次时,会被处理多次。这对于 <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 一次。不幸的是,如果有其他组件引用它,您最终可能会多次加载依赖项。
关于javascript - 在 polymer (pikadate) 中使用第三方依赖,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38842997/