模板

作为 Python Web 框架,Django 需要一种很便利的方法以动态地生成 HTML,最常见的做法是使用模板。模板包含所需 HTML 输出的静态部分,以及一些特殊的语法,描述如何将动态内容插入。 Django 项目可以配置一个或多个模板引擎。Django 的模板系统自带内建的后台-称为 Django 模板语言(DTL),以及另外一种流行的 Jinja2。其他的模板语言的后端,可查找第三方库。

问题

在使用 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>