Question

以下代码位于我的Twig模板中，用于加载CSS文件或其他文件，具体取决于用户选择的主题。这在一个简单的HTML页面上非常有效，但当我尝试将其转换为Twig应用程序的Symfony模板时，我无法找到通过{{1}的方法路由（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

其中＆＃34; app - ＆＃34;是不变的，这个词是＆＃34; red＆＃34;是变量取决于var <link href="{{ asset('bundles/activos/css/app-red.css') }} "rel="stylesheet" >

的值

为此，我试试这个：

themeName

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

变量＆＃34; themeName＆＃34;在第1188行的:: base.html.twig中不存在

我想这是因为<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变量，而是Twig变量。

我认为这里的问题是我无法将Javascript变量传递给Javascript，因为Twig是Javascript而client-side是Twig。那么，我该如何解决这个问题呢？也许我会走错路，也许使用server-side可以选择，但我不知道该怎么做。

Answer 1

要在javascript中连接，您必须使用＆＃39; +＆＃39;操作

＆＃39; ~＆＃39;运算符用于树枝连接

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>

在这个特定的例子中，如何将Javascript变量传递给Twig

2 个答案: