一般情况下我们在模板利用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模板渲染一个很重要的用途的更多相关文章

  1. Django—模板渲染

    参考文档: http://www.cnblogs.com/fnng/p/4373108.html https://code.ziqiangxuetang.com/django/django-intro ...

  2. Django模板渲染

    一 . 语法 # 关于模板渲染只需要记住两种语法就可以: 1.{{ }} # 里面写变量 2.{% %} # 里面写与逻辑相关的,比如for循环 二 . 变量名 在django的模板语言中按照语法: ...

  3. 19 01 17 Django 模板 返回一个页面

    模板 问题 如何向请求者返回一个漂亮的页面呢? 肯定需要用到html.css,如果想要更炫的效果还要加入js,问题来了,这么一堆字段串全都写到视图中,作为HttpResponse()的参数吗?这样定义 ...

  4. Django模板渲染——(二)

    模板标签 模板是由HTML代码和一些逻辑控制代码组成的,逻辑控制代码除了前面介绍的变量和过滤器,还要一个非常重要的模板标签.模板标签的语法规则是{% tag %},模板标签在渲染的过程中能提供任意的逻 ...

  5. Django 模板渲染

    模板语言 {{ 变量 }} {% 逻辑 %} {{ 变量 }} {{ 变量 }}中的点号 用于取出字典/列表等类型数据的值 {{ list.2 }} 获取列表list中索引为2的值 {{ dict.n ...

  6. Django模板渲染之自定义inclusion_tag详细使用

    inclusion_tag在使用的时候可以帮我们减少很多前端和后端重复的代码 逻辑图: inclusion_tag的作用是主页面以一定的语法给一个参数,调用某个函数,这个函数可以通过主页面给的参数做一 ...

  7. python Django教程 之模板渲染、循环、条件判断、常用的标签、过滤器

    python3.5 manage.py runserver python Django教程 之模板渲染.循环.条件判断.常用的标签.过滤器 一.Django模板渲染模板 1. 创建一个 zqxt_tm ...

  8. 初学Django基础01 建立工程,目录结构,常用配置,上下文管理,模板渲染

    django是python的web重量级框架,发展已经有10年多了,对应下面版本 Django 版本 Python 版本 1.8 2.7, 3.2 , 3.3, 3.4, 3.5 1.9, 1.10 ...

  9. django模板系统基础

    模板系统基础Django模板是一个string文本,它用来分离一个文档的展现和数据 模板定义了placeholder和表示多种逻辑的tags来规定文档如何展现 通常模板用来输出HTML,但是Djang ...

随机推荐

  1. 容器 vector :为何要有reserve

    关于STL容器,最令人称赞的特性之一就是是只要不超过它们的最大大小,它们就可以自动增长到足以容纳你放进去的数据.(要知道这个最大值,只要调用名叫max_size的成员函数.)对于vector和stri ...

  2. List容器

    List 容器 list是C++标准模版库(STL,Standard Template Library)中的部分内容.实际上,list容器就是一个双向链表,可以高效地进行插入删除元素. 使用list容 ...

  3. ucos_ii 上锁函数OSSchedLock()函数透析

    因为任务调度时一般都是通过OSTIMEDLY()来实现.在这个函数中会对当前的任务执行挂起.同时查看任务调度表中是否有优先级合适的就绪任务.如果当前任务运行时调用OSSchedLock()给调度器上锁 ...

  4. iOS开发 自定义navigationleftItem 之后手势失效的问题

    @property (nonatomic, strong) UIViewController *currentShowVC; //设置代理 self.navigationController.inte ...

  5. 开源 一行代码实现多形式多动画的推送小红点WZLBadge(iOS)-备用

    更新日志 V1.2 2015.09.25 1.UITabBarItem badge is supproted; 2.Enable change badge properties when badge ...

  6. java集合经常出现空指针问题的解决方案

    我自己问自己这个问题的时候都把自己给雷住了,但是现实如此,经常写的程序就是出现空指针的错误. 如: public List add(){ List list=null; try { list=new ...

  7. BZOJ1132: [POI2008]Tro

    1132: [POI2008]Tro Time Limit: 20 Sec  Memory Limit: 162 MBSubmit: 815  Solved: 211[Submit][Status] ...

  8. (2) 假设字符串类似这样的aba和aab就相等,现在随便给你二组字符串,请编程比较他们看是否相等

    /** * 第一种方式: * 实现思路:将字符串通过getBytes方法转换为byte数组,或者通过toCharArray()转换为char数组 * 然后先调用Arrays的sort方法进行排序,再调 ...

  9. DSP与单片机的区别

    以前刚学习单片机时,经过一订的编程,能实现很多不同的功能,当时就觉得单片机真的是神通广大.后来接触到DSP,发现DSP处理数字在通信上,更加方便.于是我就很好奇的问自己,DSP和单片机,究竟有什么区别 ...

  10. bzoj 1193

    http://www.lydsy.com/JudgeOnline/problem.php?id=1193 大范围贪心,小范围宽搜. 膜拜大神 http://blog.csdn.net/u0129155 ...