doT.js初学代码

78 阅读 0 评论 52 点赞

我是靠谱客的博主缥缈巨人，最近开发中收集的这篇文章主要介绍doT.js初学代码，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>component test</title>
<script type="text/javascript" src="jquery-1.12.3.min.js"></script>
<script type="text/javascript" src="doT.min.js"></script>
<style type="text/css">
td {
width: 150px;
height: 50px;
text-align: center;
}
.values {
display: none;
width: 100px;
}
</style>
</head>
<body>
<div id="component"></div>
<ul id="showInfo">
<script type="text/dot-tpl" charset="utf-8" id="template-1">
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>得分</th>
<th>喜欢</th>
<th>操作</th>
</tr>
{{for(i = 0; i < data1.infoArr.length; i++){}}
<tr>
<td>{{= data1.infoArr[i].name}}</td>
<td>{{= data1.infoArr[i].age}}</td>
<td>{{= data1.infoArr[i].gender||"暂无"}}</td>
<td>{{= data1.infoArr[i].mark}}</td>
<td>{{= data1.infoArr[i].like}}</td>
<td>{{= data1.infoArr[i].opt||"暂无"}}</td>
</tr>
{{}}}
</table>
</script>
</ul>
<div id="define-test">
<script type="text/dot-tpl" id="template-2">
{{##def.snippet:
<div>{{=data2.tableName}}</div>#}}
{{#def.snippet}}
</script>
</div>
<div id="array-test">
<script type="text/dot-tpl" id="template-3">
{{~it.array :value:index}}
<p>{{=index}}</p><div>{{=value}}!</div>
{{~}}
</script>
</div>
<script type="text/javascript" src="test1.js"></script>
<script type="text/javascript">
var tableData = {
tableName: "Person Infomation Table",
infoArr: [
{
name: "Jack",
age: 12,
gender: "M",
mark: 99,
like: "apple"
},
{
name: "Ann",
age: 7,
gender: "F",
mark: 92,
like: "orange"
},
{
name: "Rose",
age: 39,
gender: "F",
mark: 87,
like: "bread"
}
]
};
$("#component").getTable(tableData);
// doT.js test
var data1 = tableData;
var template = document.getElementById("template-1").innerHTML;
document.getElementById("showInfo").innerHTML = doT.template(template)(data1);
var data2 = tableData;
var template2 = document.getElementById("template-2").innerHTML;
document.getElementById("define-test").innerHTML = doT.template(template2)(data2);
var data3 = {"array": ["banana", "apple", "orange"]};
var template3 = document.getElementById("template-3").innerHTML;
document.getElementById("array-test").innerHTML = doT.template(template3)(data3)
// template-3里面的代码相当于下面的代码
function anonymous(it /**/) {
var out='';
var arr1=it.array;
if(arr1){
var value,index=-1,l1=arr1.length-1;
while(index<l1){value=arr1[index+=1];
out+='<p>'+(index)+'</p><div>'+(value)+'!</div>';
}
}
return out;
}
</script>
</body>
</html>

项目目录：

---test1

|_jquery-1.12.3.min.js

|_dot.min.js

|_test1.html

哦，得添加上test1.js(自己写的一个很初级的组件)

$.fn.extend({
// 生成表格
getTable: function(tableData) {
// 使用this会报错
that = $(this);
that.append("<h3>" + tableData.tableName + "</h3><table border='1px' cellspacing='0' cellpadding='10px'><tr><th>Name</th><th>Age</th><th>Gender</th><th>Mark</th><th>Like</th><th>操作</th></table>");
$.each(tableData.infoArr, function(i, n) {
that.find("table").append("<tr><td><span>" + n.name + "</span><input type='text' class='values' value=" + n.name + "></td><td><span>" + n.age + "</span><input type='text' class='values' value=" + n.age + "></td><td><span>" + n.gender + "</span><input type='text' class='values' value=" + n.gender + "></td><td><span>" + n.mark + "</span><input type='text' class='values' value=" + n.mark + "></td><td><span>" + n.like + "</span><input type='text' class='values' value=" + n.like + "></td><td><a href='javascript:;'>更改信息</a></td></tr>");
});
// 修改数据
$(this).on("click", "a", function() {
var index = $(this).parents("tr").index();
if($(this).text() === "更改信息") {
$(this).text("提交");
$(this).parents("tr").find("span").text("");
$(this).parents("tr").find(".values").css("display", "inline-block");
} else {
var data = {
name: $(this).parents("tr").find("input").eq(0).val(),
age: $(this).parents("tr").find("input").eq(1).val(),
gender: $(this).parents("tr").find("input").eq(2).val(),
mark: $(this).parents("tr").find("input").eq(3).val(),
like: $(this).parents("tr").find("input").eq(4).val()
};
// $.ajax({
//
type: "POST",
//
url: "/changeInfo",
//
data: data,
//
success: function(msg) {
//
$(this).parents("tr").find(".values").css("display", "none");
//
$(this).text("更改信息");
//
}
// });
// 成功
alert("更改信息成功！");
var len = $(this).parents("tr").find("span").length;
$(this).parents("tr").find("span").eq(0).text(data.name);
$(this).parents("tr").find("span").eq(1).text(data.age);
$(this).parents("tr").find("span").eq(2).text(data.gender);
$(this).parents("tr").find("span").eq(3).text(data.mark);
$(this).parents("tr").find("span").eq(4).text(data.like);
$(this).parents("tr").find(".values").css("display", "none");
$(this).text("更改信息");
}
});
},
});