python web-Django html模板特殊符号冲突

skyGAYD 2018-06-05

模板

作为Python Web 框架,Django 需要一种很便利的方法以动态地生成HTML,最常见的做法是使用模板。模板包含所需HTML 输出的静态部分,以及一些特殊的语法,描述如何将动态内容插入。

Django 项目可以配置一个或多个模板引擎。Django 的模板系统自带内建的后台-称为Django 模板语言(DTL),以及另外一种流行的Jinja2。其他的模板语言的后端,可查找第三方库。

python web-Django html模板特殊符号冲突


问题

在使用layui的时候,需要使用到layui数据表格的模板,这时候就遇到{{}}转义的问题。在django中{{}}是获取变量值,这就跟前段的layui的模板冲突了,这时候就需要django不转译指定的内容。

<table class="layui-table" lay-data="{width: 'auto', height:'auto', url:'/auto_tasks/task_view/', page:true, id:'autotaskviews'}"

lay-filter="autotaskviews_table" lay-size="xm">

<thead>

<tr>

<th lay-data="{field:'id',sort: true, fixed: true,width:'80'}">编号</th>

<th lay-data="{field:'name', sort: true,width: '180'}">任务名称</th>

<th lay-data="{field:'task_type' , sort: true,width: 140}">任务类型</th>

<th lay-data="{field:'task_custom_parameter' ,sort: true,width: '200'}">自定义参数</th>

<th lay-data="{field:'username' ,sort: true,width: '120'}">创建者</th>

<th lay-data="{field:'status_label' ,sort: true,width: '100'}">执行状态</th>

<th lay-data="{field:'create_time' ,sort: true,width: '190'}">创建时间</th>

<th lay-data="{field:'exec_time' ,sort: true,width: '190'}">执行时间</th>

<th lay-data="{field:'detail_result' ,sort: true,width: '200'}">执行结果</th>

<th lay-data="{fixed: 'right', align:'center',width: '180', toolbar: '#barDemo' }">查看详情</th>

</tr>

</thead>

</table>

<script type="text/html" id="barDemo"> {{# if(d.status == 'Y'){ }}

<button class="layui-btn layui-btn-disabled layui-btn-xs">已执行</button>

{{# } else if(d.status == 'N') { }}

<a class="layui-btn layui-btn-xs" lay-event="exec">执行</a>

{{# } else if(d.status == 'R') { }}

<span class="layui-badge layui-bg-orange layui-btn-xs">执行中</span>

{{# } }}

<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>

</script>


解决方法

从Django 1.5开始,支持{% verbatim %}标签(verbatim的意思是逐字翻译的,字面意思的),Django不会渲染verbatim标签包裹的内容,因此修改内容为:

<script type="text/html" id="barDemo">{% verbatim %} {{# if(d.status == 'Y'){ }}

<button class="layui-btn layui-btn-disabled layui-btn-xs">已执行</button>

{{# } else if(d.status == 'N') { }}

<a class="layui-btn layui-btn-xs" lay-event="exec">执行</a>

{{# } else if(d.status == 'R') { }}

<span class="layui-badge layui-bg-orange layui-btn-xs">执行中</span>

{{# } }} {% endverbatim %}

<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>

</script>

相关推荐