Добавление selectize.js в реализацию patternlab.io

У меня есть реализация patternlab (edition-node-gulp). Я пытаюсь добавить к нему selectize.js ( https://github.com/selectize/selectize.js). Когда я добавляю указанную функцию jquery в файл foot.mustache и проверяю результат, консоль указывает reference error: can't find variable $ (т.е. не распознает jquery). Когда я добавляю jquery.min.js в head.mustache, над моим тегом сценария selectize.js, некоторые из функций лаборатории шаблонов перестают работать, некоторые из них НАЧИНАЮТ работать, и я начинаю получать разные сообщения об ошибках (т.е. теперь он распознает jquery), TypeError: $('#select-beast').selectize is not a function.

Вот голова. Усача:

<!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>
Источник

2 ответа

Решение

Сопровождающий Узел Pattern Lab здесь.

На мой взгляд, ваша проблема - ваш путь.

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

Измените это на

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

Поскольку способ Pattern Lab выводит шаблоны, база public/ Каталог всегда на два уровня выше. Вы заметите, что другие файлы в этом образце головы тоже поднимаются на два уровня.

общественности /

  • модели /
    • шаблон имя / файл
  • JS /
Источник

Я думаю, что будет лучше включить библиотеки JS или CSS по CDN, здесь вы можете найти selectize.js CDN ( https://cdnjs.com/libraries/selectize.js/)

Пример:

<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.4/js/standalone/selectize.min.js"></script>
Источник
Другие вопросы по тегам