Padrino 0.12.0、Compass 0.12.2、haml 4.0.5 和 Zurb Foundation 5（“camorra”插件）-javascripts 不工作

Question

我无法让 Zurb Foundation 在 Padrino 中正常工作。样式表已编译并加载，但 Foundation 模块不起作用。

http://intense-falls-2845.herokuapp.com/

是一个haml版本的

http://foundation.zurb.com/templates/marketing.html

，但下拉菜单和轨道滑块都不起作用。该项目是使用以下方法生成的：

$ padrino g project PadrinoFoundation -e haml -c compass -s jquery -b

$ padrino g plugin camorra

$ bundle install

对 app/app.rb（创建路线）、app/stylesheets/application.scss（删除对蓝图的指南针引用）和 app/views/application.haml（布局，请阅读下文）进行一些编辑。

这些可以在下面查看：

（路线）https://github.com/bcsantos/PadrinoZurbFoundation/blob/master/app/app.rb

（样式表）https://github.com/bcsantos/PadrinoZurbFoundation/blob/master/app/stylesheets/application.scss

（布局）https://github.com/bcsantos/PadrinoZurbFoundation/blob/master/app/views/application.haml

（整个存储库）https://github.com/bcsantos/PadrinoZurbFoundation

关于布局，我使用了https://github.com/CIRCUITLLC/foundation_templates_haml/blob/master/haml/marketing.html.haml，但对于haml 来说，我可能会犯错误。希望如果有人指出我正确的方向，我可以解决问题。

有什么想法吗？

感谢阅读。

Answer 1

我在检查您的页面时注意到的几件事：

• 加载 Modernizr 时出现 404 错误：您的页面正在尝试从 /javascripts/modernizr.js 加载 Modernizr，但该文件实际上位于 /javascripts/vendor/modernizr.js 中（在 vendor 文件夹中）。

• 缺少 Foundation JavaScript 插件：您的页面正在加载 /javascripts/foundation/foundation.js，但它只包含 Foundation 核心，没有插件（顶部栏下拉菜单和 Orbit 滑块作为插件实现）。您要加载的文件似乎是 /javascripts/foundation.js（上一级）。

• 缺少触发插件的data- 属性：顶栏和轨道滑块插件由HTML 中的data- 属性激活（您可以在http://foundation.zurb.com/templates/marketing.html 的源代码中找到这些属性）。您需要 add these attributes 进入您的视图。

我不确定这些更改是否足以让您的页面正常工作，但它们似乎对于任何进一步的调试都是必要的。

---

更新：现在有一个 ReferenceError: jQuery is not defined JavaScript 错误，由 Foundation 库触发。根据 Foundation 的JavaScript setup instructions，需要在 Foundation 脚本之前加载 jQuery 和 FastClick。 （我也会遵循该文档并首先加载 jQuery，然后是 FastClick，然后是 Foundation。）

顺便说一句，所有主流浏览器现在都内置了开发者工具。我建议为您选择的浏览器探索开发者工具；它们将为您节省大量时间和精力:-)