ruby-on-rails - framework - zurb foundation components
Actualización de Foundation 5: "La capa debe ser un nodo de documento" (3)
Estoy tratando de actualizar mi aplicación Ruby on Rails de Foundation 4 a la recién publicada Foundation 5, y el cambio de CSS se realiza sin problemas. Sin embargo, me encuentro con un problema al cambiar los archivos Javascript.
Cuando cambio las versiones de Foundation 4 de los archivos foundation.min.js y modernizr.js y luego vuelvo a cargar una página, aparece este extraño error de JS en la consola:
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)
Ni siquiera sé qué hace FastClick, pero parece estar incluido en Foundation 5 y está impidiendo que Foundation se cargue. Eso, a su vez, está causando que todos mis JS dependientes de la Fundación también fallen.
Cualquier ayuda sería apreciada, ¡gracias!
Actualización: v5.0.3 ha sido liberado, lo que resuelve este problema. Asegúrese de actualizar su joya de foundation-rails consecuencia.
Este fue un error que se resolvió en una confirmación que se fusionó en v5.0.3 . Esta solución simplemente envuelve una biblioteca incrustada, FastClick , en #ready() jQuery. Puede resolver esto al incluir esa versión manualmente hasta que se libere v5.0.3.
Al mover las secuencias de comandos a la parte inferior de la página, está renunciando a Rails Turbolinks . Turbolinks requiere que JavaScript esté incluido en <head /> ya que limpia el <body /> con cada solicitud.
Que esta pasando
Foundation ya no espera a que DOM se cargue y, en su lugar, se ejecuta de inmediato. Para un mayor rendimiento móvil, Foundation 5 incorpora FastClick , un FastClick que elimina los retrasos de clic en los navegadores con las IU táctiles. Tras la ejecución, Foundation intenta inmediatamente adjuntar FastClick al document.body . Si Foundation se inicializa en <head /> , el cuerpo aún no existe: document.body devolverá null razonable causando que FastClick .
Asegúrese de tener ambos al final de su etiqueta <body> , no en <head> .
Esto arrojará el error:
<html>
<head>
</head>
<script src="/static/js/modernizr.js"></script>
<script src="/static/js/foundation.min.js"></script>
<body>
</body>
</html>
Pero esto va a funcionar:
<html>
<head>
</head>
<body>
<script src="/static/js/modernizr.js"></script>
<script src="/static/js/foundation.min.js"></script>
</body>
</html>
Para la posteridad, si intenta incluir Wordpress wp_enqueue_script hook, establezca la propiedad $ in_footer en verdadero.
wp_enqueue_script(''foundation_js'', get_bloginfo(''template_url'').''/js/foundation.min.js'', ''1.0.0'', array(), true);