使用 Zurb 基金会和 Symfony2答案

【问题标题】：Using Zurb Foundation and Symfony2使用 Zurb 基金会和 Symfony2
【发布时间】：2013-03-06 14:24:50
【问题描述】：

在我的 Symfony2 应用程序中，我使用 Zurb Foundation 来构建我的布局。这一直让我头疼...... css 工作得很好，但 js 经常不起作用。文件已加载且未报告任何错误（Zurb 工作正常），但例如单击选项卡时没有任何反应。

我希望通过 Assetic 找到加载基础文件的错误。我没有使用任何过滤器，但我需要 Assetic 从 app\resources\public 加载文件。由于这是一个非网络文件夹，如果我直接加载这些文件，我会收到“禁止”错误。

你们将来自 Foundation 的全局 css 和 js 文件放在 Symfony2 应用程序中的什么位置？像我一样在捆绑包中还是在公共文件夹中？您对如何顺利进行有什么建议吗？

编辑： 似乎我的 Zurb Foundation js 根本没有工作......但是它加载时没有错误。如果存在的话，这方面的文档似乎非常罕见。

【问题讨论】：

你有在 Symfony2 中使用 Comapss 的 Foundation5 的解决方案，请检查这个问题：stackoverflow.com/questions/24075824/… ？

标签： javascript css symfony zurb-foundation assetic

【解决方案1】：

如果你还在寻找一种更简洁的方法，这个人很不错，可以为 Foundation 以及 jQuery 和 Modernizr 制作一个捆绑包。

https://github.com/bmatzner/BmatznerFoundationBundle

这就是你所需要的：

<head>
  //...
{% block stylesheets %}
<link href="{{ asset('bundles/bmatznerfoundation/css/foundation.min.css') }}" media="screen, projection" rel="stylesheet"/>
{% endblock %}
<script src="{{ asset('bundles/bmatznerjquery/js/jquery.min.js') }}"></script>
<script src="{{ asset('bundles/bmatznerfoundation/js/foundation.min.js') }}"></script>
</head>

【讨论】：

【解决方案2】：

“加载顺序”是答案... js 文件以错误的顺序读取并导致问题。

这是解决方案：

链接到您的 js 库时，请确保单独提及每个文件，以便确定顺序。接下来，链接到 app.js 文件last。如果不这样做，所有文件都将被找到并正确加载，但 Zurb 基金会不会使用它们。如果您查看 app.js 文件，您会看到它加载了库，并为每个未找到的库返回 null - 在那个特定时刻。

所以，不要像这样链接到您的 js 文件：

{% javascripts 
 '@UnknownblissZurbfoundationBundle/Resources/public/javascripts/*'
%}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}

这样做：

{% javascripts 
 '@UnknownblissZurbfoundationBundle/Resources/public/javascripts/jquery.placeholder.js'
 '@UnknownblissZurbfoundationBundle/Resources/public/javascripts/modernizr.foundation.js'
 '@UnknownblissZurbfoundationBundle/Resources/public/javascripts/foundation.min.js'
 '@UnknownblissZurbfoundationBundle/Resources/public/javascripts/jquery.foundation.accordion.js'
 '@UnknownblissZurbfoundationBundle/Resources/public/javascripts/jquery.foundation.alerts.js'
 '@UnknownblissZurbfoundationBundle/Resources/public/javascripts/jquery.foundation.buttons.js'
 '@UnknownblissZurbfoundationBundle/Resources/public/javascripts/jquery.foundation.forms.js'      '@UnknownblissZurbfoundationBundle/Resources/public/javascripts/jquery.foundation.mediaQueryToggle.js'
 '@UnknownblissZurbfoundationBundle/Resources/public/javascripts/jquery.foundation.navigation.js'
 '@UnknownblissZurbfoundationBundle/Resources/public/javascripts/jquery.foundation.topbar.js'
 '@UnknownblissZurbfoundationBundle/Resources/public/javascripts/jquery.foundation.reveal.js'
 '@UnknownblissZurbfoundationBundle/Resources/public/javascripts/jquery.foundation.tabs.js'
 '@UnknownblissZurbfoundationBundle/Resources/public/javascripts/jquery.foundation.tooltips.js'
 '@UnknownblissZurbfoundationBundle/Resources/public/javascripts/app.js'
 '@UnknownblissZurbfoundationBundle/Resources/public/javascripts/*'
 %}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}

这样，你决定加载顺序而不是 Symfony2。以通配符链接结尾仍然是一个明智的想法，因此您可能忘记的任何内容仍将被链接。

看起来使用 Assetic 的所有额外好处都以这种方式被抛弃了，但您仍然拥有使用命名空间的优势，并且通过使用过滤器，您可以让 Assetic 将这些文件合二为一。这将限制所需的请求数量。所以唯一真正的缺点是需要额外的代码......

PS 上面选择的顺序对我来说效果很好，但您可能想提出自己的顺序。

【讨论】：