如何将Django模板变量传递给外部JS?

Django是python开发中最常用的技术,最近一直在思考如何更好的组织Django中的静态资源,比如JS、CSS一类,如何结合前端构建工具写出更好的代码以及结构呢?

首先需要解决的一个问题就是某些时候需要把JS代码写在模板里来获取后台传递过来的变量,比如:

<div><h1>Testh1><divid="my-test">div>div><script>

$(function(){

$(’#my-test’).html("{{ some_var_from_view }}")

});script>

这么写代码的话,别扭不说,前端的那些构建工具比如webpack,gulp的使用范围也将大大降低。

首先说结论,想完全剥离JS和模板而又需要使用模板渲染的数据,我是没想到什么好办法。如果读者有好办法希望赐教。

既然不能完全剥离,那么就进最大的努力分离JS所需的数据和代码吧。

既然需要模板渲染数据给JS使用,最先想到的办法就是把数据渲染到HTML代码中并隐藏。这种方法的优点就在于简单,甚至模板中都可以完全不使用

标签。缺点则是会渲染出很多的隐藏字段,JS中要写大量的 getElementsByxxxx一类的代码来获取数据。

既然如此,那么使用一种折中的办法,在HTML中使用

标签将后台传递的数据渲染成JS对象,然后JS代码中则可以直接使用这个对象了。比如模板中:

<script>var MyViewVar = {

var_1: {{ var_1 }},

var_2: {{ var_2 }},

};script>

...

<script type="text/javascript" src="/js/test_script.js">script>

使用这种方式需要注意一点就是尽量先写渲染JS变量的代码,比如写在 head中,然后再引入外部JS文件。这样,在 test_script.js 中就可以直接使用 MyViewVar 这个对象了。

当然了,既然现在流行SPA(Single Page Application)网站,那么django作为后端仅提供JSON数据也是一种办法,不过这样比较考验前端人员的能力了。

来源:Hi!Roy!

时间: 2024-10-13 00:19:26

如何将Django模板变量传递给外部JS?的相关文章

四、Python Django模板变量

Python Django模板变量 一.传递字符串变量 # cat blog/template/index.html <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UT

django[模板标签]django模板变量直接显示html代码的有关问题

django[模板标签]django模板变量直接显示html代码的问题    转 模板变量的内容,如果含html的话,django的模板系统默认会对输出进行转义,比如把<p>转义成 了<p> ,然后再显示出来的时候就如实地显示为<p>.要解决这个问题只要把默认的 转义去掉就好了.比如原本我们的模板代码是这样的:{{post.content}} 现在我们把它变成这样: {% autoescape off %} {{post.content}} {% endautoesca

Django 学习笔记(四)模板变量

关于Django模板变量官方网址:https://docs.djangoproject.com/en/1.11/ref/templates/builtins/ 1.传入普通变量 在hello/Hello World/temlplates/index.html中,修改html文件 <!DOCTYPE html> <html lang="zh-cn"> <head> <title>{{title}}</title> <met

Django模板标签中使用js变量

Django模板标签是在服务器端解析并生成html数据返回的,如何将前端的js变量应用到模板标签里 呢?确实没什么好办法,只能用一个占位符,然后在JavaScript里面替换.如下所示: <script> ... var uid = $(this).attr('uid'); var url = "{% url 'paas:ajx_get_viewlog_perm' 12345%}"; url = url.replace('12345',uid); </script&g

django 学习-3 模板变量

1.vim learn/home.html <!DOCTYPE html><html><head>        <title>{{title}}</title></head><body><hl>hello {{user}}</hl></body></html>花括号里加入的就是模板变量 2.vim /learn/views.py def  home(request):   

django模板中使用加法,以及变量赋值

加法 django中自带过滤add {{ num|add:'12' }} 这样就表示num加12,有了加就有减法了~~~ 还可以{{ num|add:total }}还可以与其他属性相加 变量赋值 {% with distance=5 %} {# 自定义的属性只在with标签内可用 #} {% endwith %} django模板中使用加法,以及变量赋值

Django——模板路径 模板变量 常用过滤器 静态文件的使用

Django 模板路径 模板变量 过滤器 静态文件的加载 模板的路径,有两种方法来使用 设置一个总的templates在大项目外面,然后在sittings的TEMPLATES中声明 在每一个APP中创建templates,然后在settings的INSTALLED_APPS中声明 模板变量的使用 语法:   {{ 变量名 }} 命名由字母和数字以及下划线组成,不能有空格和标点符号 可以使用字典.模型.方法.函数.列表 不要和python或django关键字重名 变量和查找 注:1.如果data是

django第三课 模板变量及过滤器

1.模板路径的查找 - 查找顺序, - 会首先查找TEMPLATES里面的DIRS TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', 'DIRS': [os.path.join(BASE_DIR,'templets')], 'APP_DIRS': True, 'OPTIONS': { 'context_processors': [ 'django.template.context_proce

Django模板如何用一个变量查找字典值

mydict = {"key1":"value1", "key2":"value2"} 在Django模板中查找字典值的常规方法是{{mydict.key1}},{{mydict.key2}}.如果键是循环变量怎么办?即: {% for item in list %} # list中元素,都有一个NAME属性 {{ mydict.item.NAME }} # 取出字典中相对应的NAME属性的key对应的value {% end