在此特定示例中，如何将Javascript变量传递给Twig [英] How to pass a Javascript variable to Twig in this particular example
问题描述
以下代码位于我的 Twig 模板中，用于加载 CSS 文件或其他文件，具体取决于用户选择的主题.这在简单的 HTML 页面上完美地工作，但是当我尝试将其带入 Symfony 应用程序的 Twig 模板时，找不到将 CSS 路由(使用 Twig )传递到 Javascript document.write 函数的方法.
The following code is in my Twig template and it's for load a CSS file or another depending on the theme selected by the user. This works perfectly on a simple HTML page but when I try to take this to the Twig template of my Symfony application I can't find a way to pass the CSS route (with Twig) to the Javascript document.write function.
<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">');
}
换句话说:我想将 document.write 函数的 href 放进去(在 Twig 中):
In other words: I want to put in the href of the document.write function what (in Twig) it would be this:
<link href="{{ asset('bundles/activos/css/app-red.css') }} "rel="stylesheet" >
其中"app-"是不变的，而单词"red"是可变的，具体取决于var themeName
Where "app-" is invariable and the word "red" is variable depending on the value of the var themeName
为此，我尝试了以下方法:
For that I've try this:
<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>
但是它不起作用，它给了我这个错误:
But it doesn't work, It gave me this error:
在1188行的:: base.html.twig中不存在变量"themeName"
Variable "themeName" does not exist in ::base.html.twig at line 1188
我猜是因为 themeName 不是 Twig 变量，而是 Javascript 变量.
I guess it's because themeName is not a Twig variable but a Javascript variable.
我认为这里的问题是我无法将 Javascript 变量传递给 Twig ，因为 Javascript 是 client-端和 Twig 是服务器端.那么，我该如何解决这个问题呢?也许我走错了路，也许可以使用 Ajax ，但是我不知道该怎么做.
I think that the problem here is that I can't pass a Javascript variable to Twig because Javascript is client-side and Twig is server-side.
So, how can I solve this problem? Maybe I'm going through the wrong way, maybe using Ajax can be an option, but I don't know how to do it.
推荐答案
由于您无法将javascript变量传递给细枝，因此需要通过ajax获取主题uri.
As you can't pass a javascript variable to twig you will need to fetch the theme uri by 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>
$(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
If you know all the themes at front, you can add them into an array, then you don't need to use 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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
