doT.js 模板引擎的使用

Posted 2020-08-09

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了doT.js 模板引擎的使用相关的知识，希望对你有一定的参考价值。

dot.js是一个模板框架，在web前端使用。

dot.js作为模板引擎，

主要的用途就是，在写好的模板上，放进数据，生成含有数据的html代码。

这是很简单的web前端模板框架，

简单说几个东西，你就会用了！

1、在模板中，it这个变量，就是传递进去的数据对象，应该就是英语的items；

2、doT.template( template )( obj ) 代码解释：把模板template，作为参数传入doT.template() 方法，dot就把模板处理一下，然后你再把数据对象传入，返回值，就是html与数据一起生成的html代码了，再拼接到页面即可；

3、在模板中，{{}} 包裹的内容，就是javascript代码，dot会负责处理，因为这写法怪异，新手一般出现模板写错的情况，仔细排查即可。

<!DOCTYPE html>
<html>
  
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title></head>
  
  <body>
    <ul id=‘showInfo‘>
      <script type="text/template" charset="utf-8" id=‘template_1‘>

　　{{if (it && it.length > 0) {}}

          {{for (var i = 0; i < it.length; i++) {}}

            < li > {{ = it[i].name}} < /li>

{{ } }}

{{
 }else{
}}

<li>没有数据。</li >

 {{ } }}</script>
    </ul>
    <br>
    <hr>
    <br>
    <ul id=‘showInfo2‘></ul>
  </body>
  <script type="text/javascript" charset="utf-8" src=‘doT.min.js‘></script>
  <script type="text/javascript" charset="utf-8">var template = document.getElementById(‘template_1‘).innerHTML;

    var obj = [{
      name: ‘d1‘
    },
    {
      name: ‘d2‘
    },
    {
      name: ‘d3‘
    }];

    //传递一个有数据的数组进去
    document.getElementById(‘showInfo‘).innerHTML = doT.template(template)(obj);

    //传入的数据为空
    document.getElementById(‘showInfo2‘).innerHTML = doT.template(template)([]);</script>

</html>

以上是关于doT.js 模板引擎的使用的主要内容，如果未能解决你的问题，请参考以下文章

doT.js 模板引擎的使用

doT.js——前端javascript模板引擎问题备忘录