13

小枝にJavaScriptファイルを処理させるには何をする必要がありますか？JavaScriptの小枝を使用するhtml.twigがあります。このようなもの：

{% 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');

ただし、コードは変更されていません。私が間違っていることについて何か考えはありますか？

ありがとう、スコット

4

3 に答える 3

18

グローバル変数を使用するという私の推測：

{% 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);
于 2013-07-04T09:14:18.100 に答える
12

Asseticには小枝テンプレートは含まれていません。javascriptファイル用に別のコントローラーを作成する必要があります。パフォーマンスの観点からは悪い習慣だと思いますが、この方法で2つのリクエストを処理する必要があるためです。

/**
 * @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ファイルのみを使用することです。

于 2012-09-25T17:28:05.613 に答える
1

代わりに、私がしたことは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 %}

ちょっと間抜けですが、動作します。

スコット

于 2012-09-25T20:49:43.617 に答える