关于模板渲染一个很重要的用途

一般情况下我们在模板利用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]:
时间: 2024-10-25 04:14:48

关于模板渲染一个很重要的用途的相关文章

jquery jtemplates.js模板渲染引擎的详细用法第一篇

jquery jtemplates.js模板渲染引擎的详细用法第一篇 Author:ching Date:2016-06-29 jTemplates是一个基于JQuery的模板引擎插件,功能强大,有了他你就再不用为使用JS绑定数据时发愁了.后端语言使用php,asp.net,jsp等都不是问题,使用模板渲染可以很大程度上提高程序性能,使用异步获取数据,不用整个页面都回发,好处当然不仅仅是这些. 下载jtemplates,官网的文档写得非常的详细 打开官网:http://jtemplates.tp

出位的template.js 基于jquery的模板渲染插件,简单、好用

找了好几款基于jquery的模板渲染插件,无一感觉很难用(教程较少.绑定不统一),也可能我智商问题,比如jquery template.js .jtemplate.js. 然后在github上找到这一款,和我在公司之前用的差不多(apicloud云端开发app,致敬[百小僧]大神封装的HUI,简化了在公司很多工作), 这款模板渲染和HUI的很相似,也比较简单  基于jquery的模板渲染插件. 附上github https://github.com/yanhaijing/template.js

细说后端模板渲染、客户端渲染、node 中间层、服务器端渲染(ssr)

细说后端模板渲染.客户端渲染.node 中间层.服务器端渲染(ssr) 前端与后端渲染方式的发展大致经历了这样几个阶段:后端模板渲染.客户端渲染.node 中间层.服务器端渲染(ssr). 1. 后端模板渲染 前端与后端最初的渲染方式是后端模板渲染,就是由后端使用模板引擎渲染好 html 后,返回给前端,前端再用 js 去操作 dom 或者渲染其他动态的部分. 这个过程大致分成以下几个步骤: 前端请求一个地址 url 后端接收到这个请求,然后根据请求信息,从数据库或者其他地方获取相应的数据 使用

Django框架04 /模板渲染

1. 语法 关于模板渲染需要记两种特殊符号(语法): {{ }}和{% %} 变量相关的用{{}},逻辑相关的用{%%}. 2. 变量 --- 万能的点 在Django的模板语言中按此语法使用:{{ 变量名 }}. 1.当模版引擎遇到一个变量,它将计算这个变量,然后用结果替换掉它本身. 变量的命名包括任何字母数字以及下划线 ("_")的组合. 变量名称中不能有空格或标点符号. 2.深度查询据点符(.)在模板语言中有特殊的含义.当模版系统遇到点("."),它将以这样的

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

python3.5 manage.py runserver python Django教程 之模板渲染.循环.条件判断.常用的标签.过滤器 一.Django模板渲染模板 注: 本节代码是基于 Django 1.8,但 Django 1.4 - Djagno 1.9 操作流程也是一样的. 后文给出示例代码可以在 Django 1.4.x 到 Django 1.9.x 上运行. 不过还是强调一点,一点要动手敲代码!不要偷懒哦,动手才能学到真东西. 1. 创建一个 zqxt_tmpl 项目,和一个 名

【我的笔记BLOG3】Express基本用法,和路由控制,和模板渲染ejs

1. 路由控制的工作原理 //routes/index.js中的代码//访问主页时,调用ejs模板引擎,渲染index.ejs模板文件,生成静态页面,并显示在浏览器中.router.get('/', function(req, res) { //捕获访问主页的GET请求 res.render('index', { title: 'Express' }); }); 官方给出的写法是在 app.js 中实现了简单的路由分配,然后再去 index.js 中找到对应的路由函数,最终实现路由功能. 我们不

前端-【学习心得】-模板渲染的简单方法

平时我们使用ajax请求完数据后通常都会有 一个渲染数据的过程,最开始的时候我的做法是在html界面做好数据模板,使用一些类似于angular的标记,然后用使用replace函数替换这些标记为真实的数据,后来再学习过程中找到了一个更加简洁的方法.该方法使用了正则表达式中的捕获数组的方法,完美实现了数据的渲染. var regexp = /(?:\{\{)([a-zA-z][^\s\}]+)(?:\}\})/gfunction render(template, data) {     return

虚函数和模板编程的一点共性和特征模板的一个例子

最近在看元编程中,对虚函数和模板编程有一点点感悟,写一篇博客简单总结一下. 虚函数和模板是C++里面很棒的特征,他们都提供了一种方法,让程序在编译中完成一些计算,去掉的这些计算在比较low的编程方式中,是需要在程序运行中执行的.在这里,我要强调的是:"在编译过程中完成一些计算". 我会举两个例子,一个是虚函数的,比较简单,另一个例子是关于特征模板的,在例子中,根据模板参数的类型自动选择模板的底层数据结构. 第一个例子是比较简单的虚函数的例子,有很多种水果的类型,我们有一个函数要展示他们

jquery jtemplates.js模板渲染引擎的详细用法第二篇

jquery jtemplates.js模板渲染引擎的详细用法第二篇 关于jtemplates.js的用法在第一篇中已经讲过了,这里就直接上代码,不同之处是绑定模板的方式,这里讲模板的数据专门写一个template.html的文件来展示 <span style="font-family:Microsoft YaHei;font-size:14px;"><!doctype html> <html lang="zh-CN"> <