Foundation 5 Upgrade: "Слой должен быть документом node"

Я пытаюсь обновить свое приложение Ruby on Rails от Foundation 4 до недавно выпущенного Foundation 5, а переключатель CSS идет относительно плавно. Тем не менее, я столкнулся с проблемой переключения файлов Javascript.

Когда я выключаю Foundation 4 версии файлов foundation.min.js и modernizr.js, а затем перезагружаю страницу, я получаю эту странную ошибку JS в консоли:

Uncaught TypeError: Layer must be a document node foundation.js?body=1:35
  FastClick foundation.js?body=1:35
  FastClick.attach foundation.js?body=1:35
  (anonymous function) foundation.js?body=1:40
  (anonymous function)

Я даже не знаю, что делает FastClick, но он, кажется, включен в Foundation 5, и он останавливает Foundation из загрузки. Это, в свою очередь, приводит к тому, что все из моих JS-зависимых от ФП также терпят неудачу.

Любая помощь будет оценена, спасибо!

Ответ 1

Обновление: v5.0.3 был выпущен, что устраняет эту проблему. Обязательно обновите соответствующий камень foundation-rails.

Это была ошибка, которая была решена в коммите, которая была объединена в v5.0.3. Это исправление просто обертывает встроенную библиотеку FastClick в jQuery #ready(). Вы можете решить эту проблему, включив эту версию вручную, пока не будет выпущен v5.0.3.

Переместив скрипты в нижней части страницы, вы откажитесь от Rails Turbolinks. Turbolinks требует, чтобы JavaScript был включен в <head />, так как он стирает <body /> с каждым запросом.

Что происходит

Фундамент больше не ждет загрузки DOM и вместо этого выполняется немедленно. Для повышения производительности мобильных устройств Foundation 5 встраивает FastClick, polyfill, который удаляет задержки кликов в браузерах с сенсорными интерфейсами. После выполнения Foundation немедленно пытается привязать FastClick к document.body. Если Foundation инициализирован в <head />, тело еще не существует: document.body будет разумно возвращать null, вызывая FastClick, чтобы дерьмо его штаны.

Ответ 2

Удостоверьтесь, что у вас есть как в конце тэга <body>, а не в <head>.

Это вызовет ошибку:

<html>
<head>
</head>
    <script src="/static/js/modernizr.js"></script>
    <script src="/static/js/foundation.min.js"></script>
<body>
</body>
</html>

Но это сработает:

<html>
<head>
</head>
<body>
    <script src="/static/js/modernizr.js"></script>
    <script src="/static/js/foundation.min.js"></script>
</body>
</html>

Ответ 3

Для потомков, если вы пытаетесь включить использование Wordpress wp_enqueue_script, установите для свойства $in_footer значение true.

wp_enqueue_script('foundation_js', get_bloginfo('template_url').'/js/foundation.min.js', '1.0.0', array(), true);