我有一个 Patternlab 实现(edition-node-gulp)。我正在尝试向其中添加 selectize.js ( https://github.com/selectize/selectize.js )。当我将指示的 jquery 函数添加到 foot.mustache 文件并检查结果时，控制台指示引用错误:找不到变量 $(即无法识别 jquery)。当我将 jquery.min.js 添加到 head.mustache 中 selectize.js 脚本标记上方时，模式实验室的一些功能停止工作，其中一些功能开始工作，并且我开始收到不同的错误消息(即它现在可以识别 jquery) 。 TypeError: $('#select-beast').selectize 不是一个函数。
这是头. mustache :
<!DOCTYPE html>
<html class="{{ htmlClass }}">
<head>
<title>{{ title }}</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="../../css/style.css?{{ cacheBuster }}" media="all" />
<link rel="stylesheet" href="../../css/pattern-scaffolding.css?{{ cacheBuster }}" media="all" />
<!-- Begin Pattern Lab (Required for Pattern Lab to run properly) -->
{{{ patternLabHead }}}
<!-- End Pattern Lab -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
<script src="../js/selectize.js"></script>
</head>
<body class="{{ bodyClass }} prg">
这是 foot.mustache:
<!--DO NOT REMOVE-->
{{{ patternLabFoot }}}
<!--selectize -->
<script type="text/javascript" src="selectize.js"></script>
<link rel="stylesheet" type="text/css" href="selectize.css" />
<script>
$(function() {
$('select').selectize(options);
});
</script>
<!-- end selectize -->
</body>
</html>
最佳答案
这里是模式实验室节点的维护者。
在我看来，你的问题在于你的道路。
<script src="../js/selectize.js"></script>
更改为
<script src="../../js/selectize.js"></script>
由于 Pattern Lab 输出模式的方式，基础 public/目录始终是上两层。您会注意到该头部模式中的其他文件也上升了两个级别。
公开/
- 模式/
- 模式名称/文件
- js/
关于javascript - 将 selectize.js 添加到patternlab.io 实现中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48811896/