如何在Symfony 3中将Twig正确地包含和使用jQuery _Twig

本文概述

为什么会这样？
解

Symfony是在Web项目的后端中工作的最佳选择之一, 而jQuery是可用于在前端中处理DOM的最简单的框架之一。毫无疑问, 对于简单的网站和博客而言, 这是一个很好的组合, 但是Symfony的新手开发人员将面临以下问题：当他们在base.html.twig文件中包含jQuery并在子视图中编写脚本时(在正文中)扩展此视图), 未定义的已知异常$将出现在控制台中。
注意【如何在Symfony 3中将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="http://www.srcmini.com/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 practicesloaded at the end as a good practice #}< script src="http://www.srcmini.com/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="http://www.srcmini.com/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="http://www.srcmini.com/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="http://www.srcmini.com/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 practicesloaded at the end as a good practice #}< script src="http://www.srcmini.com/jquery.js"> < /script> {# Create the javascripts blocks where all the scripts written in the child viewsshould 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="http://www.srcmini.com/css/style.css" rel="stylesheet"> < /head> < body> < h1> Example Child View 2< /h1> < p> Some text 2< /p> < script src="http://www.srcmini.com/jquery.js"> < /script> < script> $(document).ready(function(){console.log("Script working properly"); }); < /script> < /body> < /html>

哪个不应该再引发错误, 因为jQuery现在已经存在。
编码愉快！