关于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 ...
随机推荐
- c# 与 c++ 编译
C#的所有方法封装在类中,类的方法没有先后之分,无需声明.//而C++必须在函数调用前,由编译器检查参数类型是否合法,所以必须知道函数的原形(protype),所以必须提前声明函数的签名(signat ...
- vector容器
vector<int> ivec; vector<Sales_item> Sales_vec; 和其他变量定义一样,定义 vector 对象要指定类型和一个变量的列表.上 面的 ...
- NGINX的CORS--跨域访问配置
阻止交叉源访问问题. 网上可搜N多,解决办法都差不多,其中一种: add_header Access-Control-Allow-Origin http://xxxx:port; add_header ...
- windows puppet manifests 文件维护
初级 puppet windows agent实现简单的msi格式安装包安装及bat文件创建;
- 关于static静态
静态属性与方法可以在不实例化类的情况下调用,直接使用类名::方法名的方式进行调用.静态属性不允许对象使用->操作符调用. class Car { private static $speed = ...
- java_final
- (转)iOS Wow体验 - 第六章 - 交互模型与创新的产品概念(2)
本文是<iOS Wow Factor:Apps and UX Design Techniques for iPhone and iPad>第六章译文精选的第二部分,其余章节将陆续放出.上一 ...
- web前端代码规范——css代码规范
Bootstrap CSS编码规范 语法 用两个空格来代替制表符(tab) -- 这是唯一能保证在所有环境下获得一致展现的方法. 为选择器分组时,将单独的选择器单独放在一行. 为了代码的易读性,在每个 ...
- [转]myeclipse 生成JAR包并引入第三方包
myeclipse 生成JAR包并引入第三方包 我用的是myeclipse8.0 首先用myeclipse生成JAR 一.生成JAR包 1.点选项目右键—>Export 2.Java—>J ...
- [RxJS] Creating Observable From Scratch
Get a better understanding of the RxJS Observable by implementing one that's similar from the ground ...