Использование Zurb Foundation и Symfony2

В моем приложении Symfony2 я использую Zurb Foundation для создания своего макета. Это вызывает у меня головную боль... css работает довольно хорошо, но js часто не работает. Файлы загружаются, ошибок не выдает (Zurb отлично справляется со своей задачей), но, например, при нажатии на вкладки ничего не происходит.

Я ожидаю найти ошибку в загрузке файлов фонда через Assetic. Я не использую никаких фильтров, но мне нужен Assetic для загрузки файлов из app\resources\public. Поскольку это не веб-папка, если я загружаю эти файлы напрямую, я получаю «запрещенную» ошибку.

Куда вы, ребята, помещаете свои глобальные файлы css и js из Foundation в свое приложение Symfony2? В связке или в общей папке как у меня? Есть ли у вас какие-либо советы о том, как сделать так, чтобы это работало гладко?

EDIT: кажется, что ни один из моих Zurb Foundation js вообще не работает... однако он загружается без ошибок. Документация по этому поводу кажется очень редкой, если вообще существует.


javascript css symfony zurb-foundation assetic
person Paul Maclean    schedule 18.03.2013    source источник
comment
У вас есть решение для Foundation5 с Comapss в Symfony2, проверьте этот вопрос: stackoverflow.com/questions/24075824/?   -  person Ek Kosmos    schedule 13.06.2014

Ответы (2)


arrow_upward
2
arrow_downward

«Порядок загрузки» был ответом ... файлы js читались в неправильном порядке, и это вызывало проблемы.

Это решение:

При связывании с вашими библиотеками js убедитесь, что вы упомянули каждый файл отдельно, чтобы вы могли определить порядок. Затем свяжите файлы app.js последними. Если вы этого не сделаете, все файлы будут найдены и правильно загружены, но они не будут использоваться Zurb Foundation. Если вы посмотрите на файл 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 Выбранный выше порядок меня вполне устроил, но вы можете придумать свой порядок.

person Paul Maclean    schedule 21.03.2013

arrow_upward
2
arrow_downward

Если вы все еще ищете более чистый способ, этот парень был достаточно хорош, чтобы сделать пакет для 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>
person djv    schedule 05.08.2013