在此特定示例中如何将 Javascript 变量传递给 Twig

Question

以下代码位于我的

Twig

模板中，用于加载

CSS

文件或其他文件，具体取决于用户选择的主题。这在简单的

HTML

页面上完美运行，但是当我尝试将其带到我的

Twig

应用程序的

Symfony

模板时，我找不到将

CSS

路线（带有

Twig

）传递到

Javascript

document.write

功能。

<script>
var themeSettings = (localStorage.getItem('themeSettings')) ? JSON.parse(localStorage.getItem('themeSettings')) :
        {};
        var themeName = themeSettings.themeName || '';
        if (themeName)
        {
            document.write('<link rel="stylesheet" id="theme-style" href="css/app-' + themeName + '.css">');
        }
        else
        {
            document.write('<link rel="stylesheet" id="theme-style" href="css/app.css">');
        }

换句话说：我想在

href

函数的

document.write

中放入什么（在

Twig

中），它会是这样的：

<link href="{{ asset('bundles/activos/css/app-red.css') }} "rel="stylesheet" >

其中“app-”是不变的，单词“red”是可变的，具体取决于 var 的值

themeName

为此我尝试过：

<script>
    var themeSettings = (localStorage.getItem('themeSettings')) ? JSON.parse(localStorage.getItem('themeSettings')) :
    {};
    var themeName = themeSettings.themeName || '';
    if (themeName)
    {
    document.write('<link rel="stylesheet" id="theme-style" href="{{  asset('bundles/activos/css/app-' ~ themeName ~ '.css') }} ">');
    }
    else
    {
    document.write('<link rel="stylesheet" id="theme-style" href="{{  asset('bundles/activos/css/app.css') }} ">');
    }
</script>

但是它不起作用，它给了我这个错误：

变量“themeName”不存在于 ::base.html.twig 第 1188 行

我猜这是因为

themeName

不是

Twig

变量，而是

Javascript

变量。

我认为这里的问题是我无法将

Javascript

变量传递给

Twig

，因为

Javascript

是

client-side

而

Twig

是

server-side

。那么，我该如何解决这个问题呢？也许我走错了路，也许使用

Ajax

可以是一种选择，但我不知道该怎么做。

Answer 1

要在 JavaScript 中连接，您必须使用“

”运算符

'

' 运算符用于树枝连接

document.write('<link rel="stylesheet" id="theme-style" href="{{  asset('bundles/activos/css/app-' + themeName + '.css') }} ">');

Answer 2

由于您无法将 javascript 变量传递给 twig，因此您需要通过 ajax 获取主题 uri。

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <link rel="stylesheet" id="theme-style" href="{{ asset('bundles/activos/css/app.css') }}">
    </head>
    <body>

        <script>
            $(function() {
                var themeSettings = (localStorage.getItem('themeSettings')) ? JSON.parse(localStorage.getItem('themeSettings')) 
                                                                            : {};
                var themeName = themeSettings.themeName || '';
                if (themeName) {                    
                    $.ajax({
                        url : "url/to/get/theme_uri.php",
                        type: "POST",
                        data : {
                            'themeName' : themeName,
                        },
                        success: function(data, textStatus, jqXHR)
                        {
                            $('#theme-style').attr('href', data.uri);
                        },
                    });
                }
            });
        </script>
    </body>

<?php
    //... This would be a symfony controller
    public function themeUriAction(Request $request){
        $path = 'bundles/activos/css/app-' . $request->request->get('themeName').'.css';
        return new JsonResponse(array('uri' => $this->container->get('templating.helper.assets')->getUrl($path)));
    }
    //...

如果你知道前面所有的主题，你可以将它们添加到一个数组中，那么你就不需要使用ajax了

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <link rel="stylesheet" id="theme-style" href="{{ asset('bundles/activos/css/app.css') }}">
    </head>
    <body>

        <script>

            var themes = {
                {% for theme in themes %}
                    '{{ theme }}': '{{ asset('bundles/activos/css/app-'~theme~'.css') }}',
                {% endfor %}
            };

            $(function() {
                var themeSettings = (localStorage.getItem('themeSettings')) ? JSON.parse(localStorage.getItem('themeSettings'))
                                                                            : {};
                var themeName = themeSettings.themeName || '';
                if (themeName in themes) {
                    $('#theme-style').attr('href', themes[themeName]);
                };
            });
        </script>
    </body>
</html>

Answer 3

奇怪，作者要求将Javascript转移到Twig，但实际上他希望将Twig转移到Javascript？对我来说它是这样的

<script>
   {% set twigVar = 'jsVar' %}
</script>

在此特定示例中如何将 Javascript 变量传递给 Twig

问题描述投票：0回答：3

3个回答

最新问题

在此特定示例中如何将 Javascript 变量传递给 Twig

问题描述 投票：0回答：3

3个回答

最新问题

问题描述投票：0回答：3