doT.js：一个Node.js和浏览器环境下快速简洁的javascript模板引擎-阿里云开发者社区

doT.js：一个Node.js和浏览器环境下快速简洁的javascript模板引擎

简介： doT.js：一个Node.js和浏览器环境下快速简洁的javascript模板引擎

+关注继续查看

简介：

The fastest + concise javascript template engine for Node.js and browsers.

译文：

Node.js和浏览器环境下最快+简洁的javascript模板引擎

文档：http://olado.github.io/doT/index.html

下载

Node.js环境使用

npm install dot

浏览器使用

<script type="text/javascript" src="doT.js"></script>

基本模板语法

{{ }}   for evaluation
{{= }}  for interpolation
{{! }}  for interpolation with encoding
{{# }}  for compile-time evaluation/includes and partials
{{## #}}    for compile-time defines
{{? }}  for conditionals
{{~ }}  for array iteration

基本使用

<!-- 引入dot.js -->
<script src="doT.js" type="text/javascript"></script>
<!-- 定义模板 -->
<script id="content-tmpl" type="text/x-dot-template">
  <span>{{=it.name}}</span>
</script>
<!-- html节点 -->
<div id="content"></div>
<!-- 执行模板渲染 -->
<script type="text/javascript">
  var data = {
    name: "Tom",
  };
  var template = doT.template(document.getElementById("content-tmpl").text);
  // 显示渲染结果
  document.getElementById("content").innerHTML = template(data);
</script>

更多使用示例

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script id="content-tmpl" type="text/x-dot-template">
      <h2>赋值</h2>
      <span>{{=it.name}}</span>
      <h2>循环map</h2>
      {{for(var key in it.attrs) { }}
        <span>{{=key}}: {{=it.attrs[key]}}</span>
      {{ } }}
      <h2>数组</h2>
      {{~it.pets:value:index}}
        <span>{{=index}}: {{=value}}</span>
      {{~}}
      <h2>条件</h2>
      {{? it.sex == 0}}
      <span>女</span>
      {{??}}
      <span>男</span>
      {{?}}
    </script>
    <script src="doT.js" type="text/javascript"></script>
  </head>
  <body>
    <div id="content"></div>
  </body>
  <script type="text/javascript">
    var data = {
      name: "Tom",
      sex: 0,
      pets: ["dog", "cat", "pig"],
      attrs: {
        age: 23,
        phone: 123456,
      },
    };
    var template = doT.template(document.getElementById("content-tmpl").text);
    document.getElementById("content").innerHTML = template(data);
  </script>
</html>