DoT模板引擎使用

1.先引用 doT.min.js文件

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

2.script代码部分案例

将html文件在script中输出

<script type="text/x-dot-template" id="MgT">
		{{ for (var i = 0; i < it.length; i++){ }}
			{{ if( it[i].smete ){ }}
				<li class="aui-list-view-cell aui-img" tapmode  onclick="fnOpenArticle({{=it[i].tid}},{{=it[i].object_id}})">
					<img class="aui-img-object aui-pull-right"  src="http://www.sytest.com.cn/data/upload/{{=it[i].smete}}">
					<div class="aui-img-body">
					<h3>{{=it[i].post_title}}</h3>
					<div class="con">
						<span class="aui-pull-left">{{=it[i].post_modified}}</span>
						<span class="aui-pull-right ">&nbsp;{{=it[i].post_like}}浏览</span>
						<span class="aui-pull-right ">{{=it[i].post_like}} 点赞 </span>
					</div>
					</div>
				</li>
			{{ }else{ }}
				<li class="aui-list-view-cell aui-img" tapmode  onclick="fnOpenArticle({{=it[i].tid}},{{=it[i].object_id}})">
					<div class="aui-img-body">
					<h3>{{=it[i].post_title}}</h3>
					<div class="con">
						<span class="aui-pull-left">{{=it[i].post_modified}}</span>
						<span class="aui-pull-right ">&nbsp;{{=it[i].post_like}}浏览</span>
						<span class="aui-pull-right ">{{=it[i].post_hits}} 点赞 </span>
					</div>
					</div>
				</li>
			{{ } }}

	{{ }; }}		
</script>

> 将得到的json数组用方法封装 插入到需要添加的html位置中

function fnMlistcon(data)

	{
		var apendText = $api.byId("MgT").text;
		var fnapendText = doT.template(apendText);
		var html = fnapendText(data_);
		var list = $api.dom("#megList");
		$api.append(list, html);
	}

> 在ajax返回数据中调用封装好的方法将数据插入到html中

api.ajax({

	    url: "requestPath",
	    method: "post",
	    data: {
	        values: { 
	            valueName: "value"
	        },
	        files: { 
	            fileName: "filePath"
	        }
	    }
	}, function(ret, err) {
	    if (ret) {
	        fnMlist_con(ret);
	    } else {
	        alert(JSON.stringify(err));
	    }
	});

### 3.script代码部分案例(条件循环，添加参数循环)

    {{? i==0}}
    <dl style="margin-top:46px;padding-bottom:50px;display:block;" data-id="ids" >
    
    {{ for (var k = 0; k < it[i].category_one.length; k++){ }}
        <dt><a>{{=it[i].category_one[k].mobile_name}}</a></dt> 
        <dd> 
            <div class="fenimg">
                {{ for (var c = 0; c <it[i].category_one[k].category_two.length; c++){ }}
                    <div class="fen">
                        <a href="../html/goodsList.html?id={{=it[i].category_one[k].category_two[c].id}}">{{=it[i].category_one[k].category_two[c].mobile_name}}</a> 
                    </div>
                {{ } }}  
            </div>
        </dd>
    {{ } }} 
    </dl>
    {{ids++;}}
    {{??}}
    <dl style="margin-top:46px;padding-bottom:50px;display:none;" data-id="ids" >
    
    {{ for (var k = 0; k < it[i].category_one.length; k++){ }}
        <dt><a>{{=it[i].category_one[k].mobile_name}}</a></dt> 
        <dd> 
            <div class="fenimg">
                {{ for (var c = 0; c <it[i].category_one[k].category_two.length; c++){ }}
                    <div class="fen">
                        <a href="../html/goodsList.html?id={{=it[i].category_one[k].category_two[c].id}}">{{=it[i].category_one[k].category_two[c].mobile_name}}</a> 
                    </div>
                {{ } }}  
            </div>
        </dd>
    {{ } }} 
    </dl>
    {{ids++;}}
    {{?}}

{{ } }}

> {{var ids=0;}}添加自定义js代码
{{?   }} if
{{??}}else
{{?}}结尾

在doT中输出js变量 可以
例如js 变量domainName