srcmini本文概述
Symfony是在Web项目的后端中工作的最佳选择之一, 而jQuery是可用于在前端中处理DOM的最简单的框架之一。毫无疑问, 对于简单的网站和博客而言, 这是一个很好的组合, 但是Symfony的新手开发人员将面临以下问题：当他们在base.html.twig文件中包含jQuery并在子视图中编写脚本时(在正文中)扩展此视图), 未定义的已知异常$将出现在控制台中。
注意
在本文中, 我们不会显示在你的项目中包括(或定位)jQuery文件的最佳方法, 这取决于你。你可以通过阅读Stack Overflow中的这篇文章来获得有关此问题的更多信息。
为什么会这样？
你肯定已经在基础文档的<body>标记的末尾包含了jQuery, 这是优化页面呈现时间的一种很好的做法, 做得好！但是, 为什么它不能在Symfony上正常工作？为了使该错误更易于理解, 我们将使用示例。我们在项目中的base.html.twig文件中具有以下标记：
{# file: base.html.twig #}
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
{# Body block where child views will appear #}
{% block body %}{% endblock %}
{#
Ignoring the way you load jQuery , if you take care of the good practices
loaded at the end as a good practice
#}
<script src="jquery.js"></script>
</body>
</html>该文件只有1个块, 即主体块。现在, 如果你正在访问项目中的另一个操作, 该操作返回一些HTML响应并使用此基本文件, 则该视图将类似于：
{% extends base.html.twig %}
{% block body %}
<h1>Example Child View 1</h1>
<p>Some text 1</p>
<script>
$(document).ready(function(){
console.log("Script working properly");
});
</script>
{% endblock %}如你所见, 子视图使用JavaScript, 这非常简单。在浏览器上访问路线后, HTML响应将为：
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<h1>Example Child View 1</h1>
<p>Some text 1</p>
<script>
$(document).ready(function(){
console.log("Script working properly");
});
</script>
<script src="jquery.js"></script>
</body>
</html>确实, 当jQuery甚至不可用时, 它就会被执行。
解
该问题是由对Twig块的工作方式的误解引起的。默认情况下, 你不需要在文档的head标签中加载jQuery, 因为这会降低文档的加载速度。你只需要在基本文件中创建一个新块, 即javascripts(如果需要, 可以更改名称)：
{# file: base.html.twig #}
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
{# Body block where child views will appear #}
{% block body %}{% endblock %}
{#
Ignoring the way you load jQuery , if you take care of the good practices
loaded at the end as a good practice
#}
<script src="jquery.js"></script>
{#
Create the javascripts blocks where all the scripts written in the child views
should appear really
#}
{% block javascripts %}{% endblock %}
</body>
</html>而且, 如果你想在子视图中编写JavaScript(或加载文件), 只需将其写在javascripts块内而不是主体内即可：
{% extends base.html.twig %}
{% block body %}
<h1>Example Child View 2</h1>
<p>Some text 2</p>
{% endblock %}
{% block javascripts %}
<script>
$(document).ready(function(){
console.log("Script working properly");
});
</script>
{% endblock %}它将生成以下HTML代替：
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<h1>Example Child View 2</h1>
<p>Some text 2</p>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
console.log("Script working properly");
});
</script>
</body>
</html>哪个不应该再引发错误, 因为jQuery现在已经存在。
编码愉快！
评论前必须登录！
注册