Django模板变量如何传递给外部js调用的方法小结


Posted in Python onJuly 24, 2017

前言

因为工作的需要,最近一直在思考如何更好的组织Django中的静态资源,比如JS、CSS一类,如何结合前端构建工具写出更好的代码以及结构呢?下面这篇文章就给大家详细介绍了实现的方法,话不多说,来一起看看详细的介绍:

方法如下:

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

<div>
<h1>Test</h1>
<div id="my-test" ></div>
</div>
<script>
$(function(){
 $('#my-test').html("{{ some_var_from_view }}")
});
</script>

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

首先说结论,想完全剥离JS和模板而又需要使用模板渲染的数据,我是没想到什么好办法。如果读者有好办法希望赐教。
既然不能完全剥离,那么就进最大的努力分离JS所需的数据和代码吧。

既然需要模板渲染数据给JS使用,最先想到的办法就是把数据渲染到HTML代码中并隐藏。这种方法的优点就在于简单,甚至模板中都可以完全不使用<script></script>标签。缺点则是会渲染出很多的隐藏字段,JS中要写大量的getElementsByxxxx一类的代码来获取数据。

既然如此,那么使用一种折中的办法,在HTML中使用<script></script>标签将后台传递的数据渲染成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数据也是一种办法,不过这样比较考验前端人员的能力了。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Python 相关文章推荐
Python中实现参数类型检查的简单方法
Apr 21 Python
全面了解Python的getattr(),setattr(),delattr(),hasattr()
Jun 14 Python
Python数据分析之获取双色球历史信息的方法示例
Feb 03 Python
Python3.5文件修改操作实例分析
May 01 Python
Pandas透视表(pivot_table)详解
Jul 22 Python
浅谈Tensorflow 动态双向RNN的输出问题
Jan 20 Python
将自己的数据集制作成TFRecord格式教程
Feb 17 Python
pytorch中 gpu与gpu、gpu与cpu 在load时相互转化操作
May 25 Python
django序列化时使用外键的真实值操作
Jul 15 Python
如何使用python-opencv批量生成带噪点噪线的数字验证码
Dec 21 Python
Python读写Excel表格的方法
Mar 02 Python
python编写五子棋游戏
May 25 Python
详解Python list 与 NumPy.ndarry 切片之间的对比
Jul 24 #Python
apache部署python程序出现503错误的解决方法
Jul 24 #Python
Python元组操作实例分析【创建、赋值、更新、删除等】
Jul 24 #Python
Python实现购物程序思路及代码
Jul 24 #Python
python实现上传下载文件功能
Nov 19 #Python
分享几道你可能遇到的python面试题
Jul 24 #Python
python 判断是否为正小数和正整数的实例
Jul 23 #Python
You might like
php防止sql注入之过滤分页参数实例
2014/11/03 PHP
学习php设计模式 php实现抽象工厂模式
2015/12/07 PHP
php $_SESSION会员登录实例分享
2021/01/19 PHP
apache php mysql开发环境安装教程
2016/07/28 PHP
thinkPHP5框架实现多数据库连接,跨数据连接查询操作示例
2019/05/29 PHP
xml和web特殊字符
2009/04/28 Javascript
javascript学习笔记(十九) 节点的操作实现代码
2012/06/20 Javascript
JS中Iframe之间传值的方法
2013/03/11 Javascript
JavaScript中几个重要的属性(this、constructor、prototype)介绍
2013/05/19 Javascript
原生js的弹出层且其内的窗口居中
2014/05/14 Javascript
jquery表单对象属性过滤选择器实例分析
2015/05/18 Javascript
JavaScript中的this到底是什么(一)
2015/12/09 Javascript
BootStrap与validator 使用笔记(JAVA SpringMVC实现)
2016/09/21 Javascript
JavaScript中十种一步拷贝数组的方法实例详解
2019/04/22 Javascript
微信小程序通过一个json实现分享朋友圈图片
2019/09/03 Javascript
vue使用prop可以渲染但是打印台报错的解决方式
2019/11/13 Javascript
跟老齐学Python之Python文档
2014/10/10 Python
Python使用django获取用户IP地址的方法
2015/05/11 Python
python探索之BaseHTTPServer-实现Web服务器介绍
2017/10/28 Python
pandas对指定列进行填充的方法
2018/04/11 Python
Python matplotlib学习笔记之坐标轴范围
2019/06/28 Python
Python 的 __str__ 和 __repr__ 方法对比
2020/09/02 Python
Python实现对word文档添加密码去除密码的示例代码
2020/12/29 Python
.NET初级开发工程师面试题
2014/04/18 面试题
Linux如何命名文件--使用文件名时应注意
2012/01/22 面试题
初中音乐教学反思
2014/01/12 职场文书
个人校本研修方案
2014/05/26 职场文书
民族团结演讲稿范文
2014/08/27 职场文书
2014年办公室文秘工作总结
2014/12/09 职场文书
单方投资意向书
2015/05/11 职场文书
刘胡兰观后感
2015/06/16 职场文书
2015教师个人年度工作总结
2015/10/23 职场文书
四年级数学教学反思
2016/02/16 职场文书
MySQL root密码的重置方法
2021/04/21 MySQL
Go归并排序算法的实现方法
2022/04/06 Golang
Python测试框架pytest核心库pluggy详解
2022/08/05 Golang