Question

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

我希望通过Assetic在加载基础文件时发现错误。我没有使用任何过滤器，但我需要Assetic从app \ resources \ public加载文件。由于这是一个非Web文件夹，如果我直接加载这些文件，我会被“禁止” - 错误。

你们在Symfony2应用程序中将你们的全球css和js文件放在哪里？在捆绑包或像我这样的公共文件夹中？您对如何顺利运行有任何建议吗？

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

Answer 1

'加载订单'就是答案...... 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 上面选择的订单对我来说很好，但您可能想要自己订购。

Answer 2

如果你仍然在寻找一种更干净的方式，那么这个人就可以为基金会和jQuery＆amp; 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>

使用Zurb Foundation和Symfony2

2 个答案: