Symfony2, ветка и JavaScript

Что мне нужно сделать, чтобы получить ветку для обработки файла JavaScript? У меня есть html.twig, который использует ветку JavaScript. Что-то вроде этого:

{% extends 'BaseBundle::layout.html.twig' %}

{% block javascripts %}
    {{ parent() }}
    {% javascripts
        '@BaseBundle/Resources/js/main.js.twig'
    %}
    {% endjavascripts %}
{% endblock %}

< more template omitted >

И части main.js.twig:

function testFunction()
{
    alert('{{VariableFromPHP}}');
}

И контроллер:

/**
 * @Route("/",name="home")
 * @Template("MyBundle:Default:index.html.twig")
 */
public function indexAction()
{
   return array( 'VariableFromPHP' => 'Hello World');
}

Я ожидал, что JavaScript будет выглядеть во время выполнения:

alert('Hello World');

Но код не изменился. Любые идеи, что я делаю неправильно?

Спасибо, Скотт

Ответ 1

Assetic не включает шаблоны ветки; вы должны создать отдельный контроллер для файла javascript. Хотя я считаю это плохой практикой, так как вам придется обрабатывать два запроса таким образом.

/**
 * @Route("/main.js")
 */
public function mainJsAction() {
    $params = array( 'test' => 'ok' );
    $rendered = $this->renderView( 'MyBundle:Default:main.js.twig', $params );
    $response = new \Symfony\Component\HttpFoundation\Response( $rendered );
    $response->headers->set( 'Content-Type', 'text/javascript' );
    return $response;
}

{% extends 'BaseBundle::layout.html.twig' %}

{% block javascripts %}
    {{ parent() }}
    <script type="text/javascript" src="{{ path('my_default_mainjs') }}"></script>
{% endblock %}

Альтернативой является сбрасывание динамических переменных в html и использование только статических файлов javascript.

Ответ 2

Мое предложение использовать глобальные переменные:

{% javascripts '@AcmeBundle/Resources/public/js/*' output='js/compiled/main.js'%}
        <script>
            var TWIG = {};
            TWIG.variableOne   = "{{ path('rote_to_nowhere') }}";
            TWIG.variableTwo   = "{{ helloworldVar }}";
            TWIG.variableThree = "{{ "something"|trans }}";
        </script>
        <script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}

то вы можете использовать его в файле js:

alert(TWIG.variableTwo);

Ответ 3

Вместо этого я сделал это в main.js:

function doGetStringFromSubClass()
{
    if (typeof getStringFromSubClass == 'function')
    {
        return getStringFromSubClass();
    }
    else
    {
        alert('getStringFromSubClass() needs to be defined.')
    }
}

function testFunction()
{
    alert(doGetStringFromSubClass());
}

а в подклассах подкласса - main.js:

function getStringFromSubClass(){
    return "baseClassString";
    }

И эта веточка:

{% extends 'BaseBundle:Default:index.html.twig' %}

{% block javascripts %}
    {{ parent() }}

    {% javascripts
        '@SomeSubclassBundle/Resources/js/main.js'
    %}

    <script type="text/javascript" src="{{ asset_url }}"></script>
    {% endjavascripts %}
{% endblock %}

Прикольно, но это работает.

Скотт

Ответ 4

Я хочу использовать

<!DOCTYPE html>
<html>
<body>

<p>A function is triggered when the user releases a key in the input field. The function outputs the actual key/letter that was released inside the text field.</p>

Enter your name: <input type="text" id="fname" onkeyup="myFunction()">

<p>My name is: <span id="demo"></span></p>

<script>
function myFunction() {
    var x = document.getElementById("fname").value;
    document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>

в TWIG