doT.js

doT.js github地址 前端渲染引擎doT.js解析

使用方法：

{{= }}
// for interpolation 用于插值
{{ }} 
//for evaluation
{{~ }} 
//for array iteration 用于数组迭代
{{? }}
// for conditionals 用于条件
{{! }}
// for interpolation with encoding 用于带编码的插值
{{# }}
// for compile-time evaluation/includes and partials
{{## #}}
// for compile-time defines

调用方式：

var tmpText = doT.template(模板);
tmpText(数据源);

语法结构：

赋值：

//格式：
{{= }}
//示例：
<div id="show_list"></div>
<script id="tpl" type="text/x-dot-template">
      <div>Hi {{=it.name}}!</div>
      <div>{{=it.age || ''}}</div>
</script>
<script>
     var data = {"name":"Jake","age":31};
     var show_tpl = doT.template($("#tpl").text());
     $("#show_list").html(show_tpl(data));
</script>

for 循环结构：

//格式：
{{ for(var x in data) { }} 
    {{= key }} 
{{ } }}
//示例：
<div id="show_list"></div>
<script id="tpl" type="text/x-dot-template">
     {{ for(var x in it) { }}
          <div>KEY:{{= x }}---VALUE:{{= it[x] }}</div>
     {{ } }}
</script>
<script>
var data = {
              "name":"Jake",
              "age":31,
              "interests":["basketball","hockey","photography"],
              "contact":{
                          "email":"jake@xyz.com",
                          "phone":"999999999"
               }
      };  
     var show_tpl = doT.template($("#tpl").text());
     $("#show_list").html(show_tpl(data));
</script>

if 逻辑结构：

//格式：
{{if(conditions){ }}
{{} eles if(conditions){ }}
{{} eles{ }}
{{ }}} 
//示例：
<div id="show_list"></div>
<script id="tpl" type="text/x-dot-template">
      {{if(!it.name) { }}
            <div>Oh, I love your name, {{=it.name}}!</div>
          {{ } eles if(!it.age === 0) { }}
                <div>Guess nobody named you yet!</div>
          {{} eles{ }}
                You are {{=it.age}} and still dont have a name?
      {{ }}} 
</script>
<script>
var data = {
              "name":"Jake",
              "age":31,
              "interests":["basketball","hockey","photography"],
              "contact":{
                          "email":"jake@xyz.com",
                          "phone":"999999999"
               }
      };  
     var show_tpl = doT.template($("#tpl").text());
     $("#show_list").html(show_tpl(data));
</script>

数组：

//格式：
{{~data.array :value:index }}
//示例：
<div id="show_list"></div>
<script id="tpl" type="text/x-dot-template">
      {{~it.array:value:index}}
          <div>{{= index+1 }}{{= value }}!</div>
</script>
<script>
var data = {
            "array":["banana","apple","orange"]
      };
     var show_tpl = doT.template($("#tpl").text());
     $("#show_list").html(show_tpl(data));
</script>

编码：

//格式：
{{!it.uri}}
//示例：
<div id="show_list"></div>
<script id="tpl" type="text/x-dot-template">
     Visit {{!it.uri}} {{!it.html}}
</script>
<script>
var data = {
           "uri":"http://bebedo.com/?keywords=Yoga",
           "html":"<div style='background: #f00; height: 30px'>html元素</div>"
      };
     var show_tpl= doT.template($("#tpl").text());
     $("#show_list").html(show_tpl(data));
</script>

doT.min.js