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编写一个简单的Lisp解释器的教程
Apr 03 Python
在Python中使用itertools模块中的组合函数的教程
Apr 13 Python
在Python中使用lambda高效操作列表的教程
Apr 24 Python
在Python中使用next()方法操作文件的教程
May 24 Python
Python使用time模块实现指定时间触发器示例
May 18 Python
Python列表list解析操作示例【整数操作、字符操作、矩阵操作】
Jul 25 Python
Python实现检测文件MD5值的方法示例
Apr 11 Python
详解python Todo清单实战
Nov 01 Python
Python使用pymongo库操作MongoDB数据库的方法实例
Feb 22 Python
python:动态路由的Flask程序代码
Nov 22 Python
Pytorch 使用opnecv读入图像由HWC转为BCHW格式方式
Jun 02 Python
解决python的空格和tab混淆而报错的问题
Feb 26 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
thinkPHP分组后模板无法加载问题解决方法
2016/07/12 PHP
Prototype 1.5.0_rc1 及 Prototype 1.5.0 Pre0小抄本
2006/09/22 Javascript
JavaScript创建命名空间(namespace)的最简实现
2007/12/11 Javascript
JS方法调用括号的问题探讨
2014/01/24 Javascript
JavaScript DOM进阶方法
2015/04/13 Javascript
超级给力的JavaScript的React框架入门教程
2015/07/02 Javascript
js实现文字在按钮上滚动的方法
2015/08/20 Javascript
JS+CSS实现简易实用的滑动门菜单效果
2015/09/18 Javascript
微信开发 微信授权详解
2016/10/21 Javascript
jquery购物车结算功能实现方法
2020/10/29 Javascript
Bootstrap modal 多弹窗之叠加引起的滚动条遮罩阴影问题
2017/02/27 Javascript
Bootstrap的popover(弹出框)2秒后定时消失的实现代码
2017/02/27 Javascript
vue-star评星组件开发实例
2018/03/01 Javascript
如何在JavaScript中优雅的提取循环内数据详解
2019/03/04 Javascript
react实现antd线上主题动态切换功能
2019/08/12 Javascript
vue+elementui 对话框取消 表单验证重置示例
2019/10/29 Javascript
小程序实现图片预览裁剪插件
2019/11/22 Javascript
JS如何实现网站中PC端和手机端自动识别并跳转对应的代码
2020/01/08 Javascript
[03:49]辉夜杯现场龙骑士COSER秀情商“我喜欢芬队!”
2015/12/27 DOTA
Python中文分词工具之结巴分词用法实例总结【经典案例】
2017/04/15 Python
浅谈Python处理PDF的方法
2017/11/10 Python
使用python图形模块turtle库绘制樱花、玫瑰、圣诞树代码实例
2020/03/16 Python
解决使用python print打印函数返回值多一个None的问题
2020/04/09 Python
MxNet预训练模型到Pytorch模型的转换方式
2020/05/25 Python
LocalStorage记住用户和密码功能
2017/07/24 HTML / CSS
HTML5 Canvas实现360度全景图的示例代码
2018/01/29 HTML / CSS
Joules官网:女士、男士和儿童服装和鞋类
2018/10/23 全球购物
工程管理造价应届生求职信
2013/11/13 职场文书
初中家长寄语
2014/04/02 职场文书
实现中国梦思想汇报2014
2014/09/13 职场文书
2014学习优秀共产党员先进事迹思想汇报
2014/09/14 职场文书
幼儿园六一主持词
2015/06/30 职场文书
《伯牙绝弦》教学反思
2016/02/16 职场文书
读《茶花女》有感:山茶花的盛开与凋零
2020/01/17 职场文书
Python编程编写完善的命令行工具
2021/09/15 Python
Kubernetes部署实例并配置Deployment、网络映射、副本集
2022/04/01 Servers