关于Django模板渲染一个很重要的用途
一般情况下我们在模板利用django的for标签循环生成html代码时,可以同时生成形如:
"{% url 'dormitory:hygiene_detail' pk={{ id }} %}"
的url地址,这样很容易就把参数动态的匹配到每一个url中了。
但是,如果html的代码需要js来动态的生成,再用django的for标签就不合适了。
因为for标签运用在js里,会生成大量的js代码。
因此,这就需要使用json.dumps()来把后台的dict数组转化成json数组,再在模板中使用safe过滤器来获取json数据,获取了json数据,剩下的事交给js就可以了。
但是,这种情况下,我遇到了一个头疼的问题,那就是url不能使用以下方式来传递参数了。
"{% url 'dormitory:hygiene_detail' pk={{ id }} %}"
这个时候我就想到了使用后台来传递url地址:
"href": "{% url 'dormitory:hygiene_detail' pk=" + str(id) + " %}"
这样在前台遍历json数组的时候就可以拿到href属性。
for(var i in {{ dormitory_list|safe }}){ var item = dormitory_list[i]; str += '<div class="dormitory-number color-0082fe" is_checked="1" href="' + item.href + '">' + item.number + '</div>'; }
在click事件里面拿到href属性实现跳转:
$('.dormitory-number').on('click', function(e){ if($(e.target).attr('is_checked') == '1'){ window.location.href = $(e.target).attr('href'); } }
...
什么?你以为这样就万事大吉了?NO NO,接下来我又发现在模板中接收到的这个url参数是个静态字符串,并未解析:
alert(url);
显示:{% url 'dormitory:hygiene_detail' pk=10 %}
想要得到的渲染结果应该是:/dormitory/hydiene_detail/10/
解决方法就是在后台传递href参数时,使用Django的Template处理一下即可:
from django.template import Context, Template ctx['dormitory_list'].append({ "number": 100, "is_checked": 1, "id": id, "href": Template("{% url 'dormitory:hygiene_detail' pk=" + str(id) + " %}").render(Context()) })
最后一步,在click事件里面实现跳转:
$('.dormitory-number').on('click', function(e){ if($(e.target).attr('is_checked') == '1'){ window.location.href = $(e.target).attr('href'); } }
到此就万事大吉啦!
附:
E:\qiye (gengleiming) λ manage.py shell Python 2.7.11 (v2.7.11:6d1b6a68f775, Dec 5 2015, 20:40:30) [MSC v.1500 64 bit (AMD64)] Type "copyright", "credits" or "license" for more information. IPython 5.0.0 -- An enhanced Interactive Python. ? -> Introduction and overview of IPython's features. %quickref -> Quick reference. help -> Python's own help system. object? -> Details about 'object', use 'object??' for extra details. In [1]: from django.template import Context, Template In [2]: t = Template('My name is {{ name }}.') In [3]: c = Context({'name': 'nowamagic'}) In [4]: t.render(c) Out[4]: u'My name is nowamagic.' In [5]:
关于Django模板渲染一个很重要的用途的更多相关文章
- Django—模板渲染
参考文档: http://www.cnblogs.com/fnng/p/4373108.html https://code.ziqiangxuetang.com/django/django-intro ...
- Django模板渲染
一 . 语法 # 关于模板渲染只需要记住两种语法就可以: 1.{{ }} # 里面写变量 2.{% %} # 里面写与逻辑相关的,比如for循环 二 . 变量名 在django的模板语言中按照语法: ...
- 19 01 17 Django 模板 返回一个页面
模板 问题 如何向请求者返回一个漂亮的页面呢? 肯定需要用到html.css,如果想要更炫的效果还要加入js,问题来了,这么一堆字段串全都写到视图中,作为HttpResponse()的参数吗?这样定义 ...
- Django模板渲染——(二)
模板标签 模板是由HTML代码和一些逻辑控制代码组成的,逻辑控制代码除了前面介绍的变量和过滤器,还要一个非常重要的模板标签.模板标签的语法规则是{% tag %},模板标签在渲染的过程中能提供任意的逻 ...
- Django 模板渲染
模板语言 {{ 变量 }} {% 逻辑 %} {{ 变量 }} {{ 变量 }}中的点号 用于取出字典/列表等类型数据的值 {{ list.2 }} 获取列表list中索引为2的值 {{ dict.n ...
- Django模板渲染之自定义inclusion_tag详细使用
inclusion_tag在使用的时候可以帮我们减少很多前端和后端重复的代码 逻辑图: inclusion_tag的作用是主页面以一定的语法给一个参数,调用某个函数,这个函数可以通过主页面给的参数做一 ...
- python Django教程 之模板渲染、循环、条件判断、常用的标签、过滤器
python3.5 manage.py runserver python Django教程 之模板渲染.循环.条件判断.常用的标签.过滤器 一.Django模板渲染模板 1. 创建一个 zqxt_tm ...
- 初学Django基础01 建立工程,目录结构,常用配置,上下文管理,模板渲染
django是python的web重量级框架,发展已经有10年多了,对应下面版本 Django 版本 Python 版本 1.8 2.7, 3.2 , 3.3, 3.4, 3.5 1.9, 1.10 ...
- django模板系统基础
模板系统基础Django模板是一个string文本,它用来分离一个文档的展现和数据 模板定义了placeholder和表示多种逻辑的tags来规定文档如何展现 通常模板用来输出HTML,但是Djang ...
随机推荐
- HTML&CSS基础学习笔记1.24-input标签的单选与多选
单选和多选 单选框和多选框是用<input>标签来实现的. <input>标签的type属性值为"checkbox"时,表示多选框,为"radio ...
- iOS学习之网易新闻简易Demo
简易NewsDemo代码分析 界面布局就不多说了.效果图:(自定义了三套Cell,最后一套Cell是页面最下方的"正在加载中..."Cell,图三.) 主要分析工程 ...
- opencv 批量图像读写
处理图像数据集时通常要读写整个文件夹里的图像,这时就会用的图像的批量读写. 比较常用的方法就是生成一个包含所有图像的txt列表 生成txt文件的方法如下: 利用cmd进入dos 利用路径进入指定文件夹 ...
- cs代码实现控件移动TranslateTransform
xaml: <Rectangle> <Rectangle.RenderTransform> <TranslateTransform x:Name="myTran ...
- XJOI网上同步训练DAY6 T2
思路:记得FJ省队集训好像有过这题,可是我太弱了,根本不懂T_T #include<cstdio> #include<iostream> #include<cmath&g ...
- (转) Linux的capability深入分析(2)
一)capability的工具介绍 在我们的试验环境是RHEL6,libcap-2.16软件包中包含了相关的capability设置及查看工作,如下: rpm -ql libcap-2.16- ...
- 微软CEO史蒂夫·鲍尔默(Steve Ballmer)在12个月内退休
Microsoft CEO Steve Ballmer to retire within 12 months Aug. 23, 2013 Board of directors initiates su ...
- bzoj1190
题目:http://www.lydsy.com/JudgeOnline/problem.php?id=1190 神题...... F[i][j]表示容量为j*2^i+W第i-1位到第0位的最大价值, ...
- cf494A Treasure
A. Treasure time limit per test 2 seconds memory limit per test 256 megabytes input standard input o ...
- UVA 11478 Halum (差分约束)
题目链接:https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem ...