Как динамически экспортировать встроенный javascript со сборкой в шаблоны веточек?

Question

Как динамически экспортировать встроенный javascript со сборкой в шаблоны веточек?

1

Я пытаюсь очистить свой вывод html в проекте Symfony2. Меня действительно беспокоит то, что я не знаю, как экспортировать встроенный JS динамически. Например: мне нужно инициализировать JQuery Datatables, но не на каждой странице, большинство страниц имеют свои собственные встроенные js. Im ищет способ просто расширить блок twig с помощью моих js-фрагментов, которые группируются вместе и загружаются assetic из внешнего (виртуального).js файла.

user3485366 01 апр. 2014, в 16:49

Источник

Теги:

javascript

symfony

twig

inline

assetic

1 ответ

Ещё вопросы

George · Accepted Answer · 2014-04-04T17-50-00.000Z

Да, вам нужно использовать наследование шаблона и иметь родительский блок javascript/jquery. JQuery такой же, как javascript, поэтому вы можете включить это в один блок или иметь отдельный файл. Если вы используете переменную, передайте эту переменную в базовый раздел jquery. Для ваших разных страниц вам необходимо расширить базовый файл twig и либо добавить в блок javascript, включив родителя, либо полностью переопределив его.

базовый файл twig имеет базовую компоновку html с блоками js и css:

<!DOCTYPE html>
<html>
    <head>
        {% block head %}
            <link rel="stylesheet" href="style.css" />
            <title>{% block title %}{% endblock %} - My Webpage</title>
        {% endblock %}
        {% block js %}
            <script src="{{ asset('js/main.js') }}"></script>
        {% endblock %}

    </head>
    <body>
        <div id="content">{% block content %}{% endblock %}</div>
        <div id="footer">
            {% block footer %}
                &copy; Copyright 2011 by <a href="http://domain.invalid/">you</a>.
            {% endblock %}
        </div>
    </body>
</html>

Это унаследовано дочерней страницей

{% extends "base.html" %}

{% block title %}Index{% endblock %}
{% block js%}
    {{ parent() }}
    <script src="jquery.plugin.js"></script>
{% endblock %}
{% block content %}
    <h1>Index</h1>
    <p class="important">
        Welcome on my awesome homepage.
    </p>
{% endblock %}

Вот как я сейчас его использую: D Мой вопрос заключается в том, что я хочу, чтобы в одном блоке (например, назовите его inlinejs) содержались все виды фрагментов, например, $('.ajaxsearch').click(function() {var input = $(this).parent().find('input') etc... и затем каким- то образом использовать сборку для загрузки этого блока через <script type="text/javascript" src="/app_dev.php/snippets.js"></script> вместо того, чтобы иметь все это в моем источнике. Мне нравится чистый вывод :)
Я понимаю, что вы хотите чистый вывод, но такой подход может не работать лучше. Единственный вывод потенциально может меняться от страницы к странице и потребовать его постоянной перекомпиляции. С разными файлами не все будут использоваться на каждой странице, и кэширование будет работать лучше. Я думаю, что лучший подход состоит в том, чтобы сгруппировать ваши файлы .js как можно меньше, свести их к минимуму и разрешить вызов нескольких файлов при каждой загрузке страницы. Я думаю, что это улучшит кеширование и при этом количество файлов будет минимальным, но больше одного.