JavaScript和CSS中的Jinja2

当程序逐渐变大时，很多时候我们会需要在JavaScript和CSS代码中使用Jinja2提供的变量值，甚至是控制语句。比如，通过传入模板的 theme_color变量来为页面设置主题色彩，或是根据用户是否登录来决定是否执行某个JavaScript函数。

首先要明白的是，只有使用render_template()传入的模板文件才会被渲染，如果你把Jinja2代码写在单独的JavaScript或是CSS文件中，尽管你在HTML中引入了它们，但它们包含的Jinja2代码永远也不会被执行。对于这类情况，下面有一些Tips:

1.行内/嵌入式的JavaScript/CSS

如果要在JavaScript和CSS文件中使用Jinja2代码，那么就在HTML中使用\<style>和\<script>标签定义这部分CSS和JavaScript代码。

在这部分CSS和JavaScript代码中加入Jinja2时，不用考虑编写时的语法错误，比如引号错误，因为Jinja2会在渲染后被替换掉,所以只需要确保渲染后的代码正确即可。

并不推荐使用这种方式，尤其是行内JavaScript/CSS会让维护变得困难。避免把大量JavaScript代码留在HTML中的办法就是尽量将要使用的Jinja2变量值在HTML模板中定义为JavaScript变量。

2.定义为JavaScript/CSS变量

对于想要在JavaScript中获取的数据，如果是元素特定的数据，比如某个文章条目对应的id值，可以通过HTML元素的data-*属性存储。可以自定义横线后的名称，作为元素上的自定义数据变量，比如data-id,data-username等

<span data-id="{{ user.id }}" data-username="{{ user.username }}">

在JavaScript中，我们可以使用DOM元素的dataset属性获取data-*属性值，比如element.dataset.username,或是使用getAttribute()方法，比如element.getAttribute('data-username');使用jQuery时，可以直接对jQuery对象调用data方法获取，比如$element.data('username')。

在HTML中，"data-*"被称为自定义数据属性(custom data attribute)，我们可以用它来存储自定义的数据供JavaScript获取。

对于需要全局使用的数据，则可以在页面中使用嵌入式JavaScript定义变量，如果没法定义JavaScript变量，那就考虑定义为函数，比如：

<script type="text/javascript">
    var foo = '{{ foo_variable }}'
</script>

当你在JavaScript中插入了太多Jinja2语法时，或许这时你该考虑将程序转变为Web API，然后专心使用JavaScript来编写客户端，在本书的第二部分我们会介绍如何编写Web API。

CSS同理，有些时候你会需要将Jinja2变量值传入CSS文件，比如我们希望将用户设置的主题颜色设置到对应的CSS规则中，或是需要将 static目录下某个图片的URL传入CSS来设置为背景图片，除了将这部分 CSS定义直接写到HTML中外，我们可以将这些值定义为CSS变量，如下所示

<style>
:root {
    --theme-color: {{ theme_color }};
    --background-url: {{ url_for('static', filename='background.jpg') }}
}
</style>

0 Comments latest

No comments.

Name

Site