以下代码位于我的
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
可以是一种选择,但我不知道该怎么做。
要在 JavaScript 中连接,您必须使用“
+
”运算符
'
~
' 运算符用于树枝连接
document.write('<link rel="stylesheet" id="theme-style" href="{{ asset('bundles/activos/css/app-' + themeName + '.css') }} ">');
由于您无法将 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,但实际上他希望将Twig转移到Javascript? 对我来说它是这样的
<script>
{% set twigVar = 'jsVar' %}
</script>