Symfony2、树枝和 JavaScript答案

【问题标题】：Symfony2, twig and JavaScriptSymfony2、树枝和 JavaScript
【发布时间】：2012-09-16 08:29:48
【问题描述】：

我需要做什么才能让 twig 处理 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');

但是，代码没有改变。任何想法我做错了什么？

谢谢，斯科特

【问题讨论】：

标签： php symfony twig

【解决方案1】：

我对使用全局变量的建议：

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

【讨论】：

这非常适合我的需要，生成用于 ajax 查询的路由。
可能使用var TWIG = TWIG || {};，尤其是当您打算使用两次时。
@LaytonEverson FosJsRoutingBundle 可以为您提供帮助

【解决方案2】：

相反，我在 main.js 中做的是这个：

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

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

并且，在子类 twigs 中，我们有这个 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 %}

有点傻，但是，它有效。

斯科特

【讨论】：

【解决方案3】：

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 文件。

【讨论】：