flask模板应用-javaScript和CSS中jinja2 ---白红宇

flask模板应用-javaScript和CSS中jinja2 --

阅读量：4325 次

发布时间：2019-06-06

本文共 1318 字，大约阅读时间需要 4 分钟。

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

需要注意，只有使用render_template()传入的模板文件才会被渲染，如果把jinja2(模板引擎)代码写在单独的javaScript或CSS文件中，尽管你在HTML中引入了它们，但他们包含的jinja代码不会被执行。

下面是一些注意点：

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

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

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

{
   { user.username }}

在javaScript中，可以使用DOM元素的dataset属性获取data-*属性值，比如

element.dataset.username,或是使用getAttribute()方法，

比如element.getAtrribute('data-username')

使用jQuery时，可以直接对jQuery对象调用data方法获取，比如$element.data(‘username’)

在HTML中，”data-*”被称为自定义数据属性，我们可以用它来存储自定义的数据供javaScript获取。

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

当在javaScript中插入很多jinja2语法时，应该讲程序转变为Web API，然后专心使用havaScrpt来编写客户端，后面会介绍Web API

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

在CSS文件中，使用var()函数并传入变量名即可获取对应的变量值：

#foo {    color: var(--theme-color);}#bar{    background: var(--background-url);}

转载于:https://www.cnblogs.com/xiaxiaoxu/p/10468150.html

你可能感兴趣的文章