tmod.js 最大的優點就可以代替JavaScript字符串拼接，還可以引用子模板。之前普通的開發模式使用JavaScript調用ajax，然後得到數據後，用JavaScript字符串拼接，然後插入到元素裏面，比如下面這樣：
var html = '';
html.push('<td>' + val.lease_begin + '</td>');
html.push('<td>' + val.pay_date + '</td>');
html.push('<td>' + cashing_time + '</td>');
$('table tr').html(html.join(''));
//這樣看起來是不是很麻煩
使用tmod.js 可以省略字符串拼接，直接使用模板渲染，list 就是就是ajax 回來的數據，比如下面這樣：
{{each list}}
<td>{{$value.name}}</td>
<td>{{$value.age}}</td>
{{/each}}
//和上面比起來，這個看起來代碼很簡潔，也很省事。
安裝環境
1. 安裝 node 用來實時編譯模板
2. 安裝 npm install -g tmodjs 用來監聽文件變化
直接看下面的小Demo
我的文件結構
template 文件是放編譯過後的 template.js （在頁面直接引用）
tpl 文件用來放模板頁面
配置文件
package.json 放到tpl文件下面就可以
{
"name": "tmod",
"version": "1.0.1",
"dependencies": {
"tmodjs": "1.0.4"
},
"tmodjs-config": {
"output": "../template",
"charset": "utf-8",
"syntax": "simple",
"helpers": null,
"escape": true,
"compress": true,
"type": "default",
"runtime": "template.js",
"combo": true,
"minify": true,
"cache": false,
"verbose": true
}
}
node和tmod安裝完成後，使用終端進入到模板文件tpl，執行命令tmod
1. cd tpl 回車
2. tmod 回車
然後就可以看到監聽文件模板的變化了，如果不監聽，直接修改模板是沒有效果的，在開發項目的時候一直開着監聽就好。
index.html
是父模板頁面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<script type="text/javascript" src="../template/template.js"></script>
<script type="text/javascript" src="../js/index.js"></script>
</head>
<body>
<header id="header">
</header><!-- /header -->
<content id="content">
</content><!-- content -->
<footer id="footer">
</footer><!-- /footer -->
</body>
</html>
index.js
index.js 是主要的文件，他把(herder,footer)子模板引入模板裏面
window.onload = function() {
//herder數據
var headData = {
list: [{
name: 'keke',
age: 26,
address: '北京市'
},{
name: 'keke',
age: 25,
address: '北京市'
},{
name: 'keke',
age: 18,
address: '北京市'
}]
}
//footer數據
var footData = {
text: '我是底部數據',
list: [{
"title": "美女",
"author": "有很多"
},
{
"title": "跑車",
"author": "中國製造"
},
{
"title": "哈雷",
"author": "摩托車"
},
{
"title": "帥哥",
"author": "也不少"
}
]
}
// 引入模板並且傳入數據
document.getElementById('header').innerHTML = template('header', headData);
document.getElementById('footer').innerHTML = template('footer', footData);
//template裏面的header 就是模板的名字
}
header.html模板
<h2>我是頭部數據</h2>
{{each list}}
<p>
{{if $value.age > 18}}
索引{{$index}} ,
名稱{{$value.name}} ,
年齡{{$value.age}}
{{/if}}
</p>
{{/each}}
<!-- list 就是接受到的數組，$value代表每一條對象，$index是索引 -->
footer.html模板
<h2>{{text}}</h2>
<ul>
{{each list}}
<li>{{$value.title}},{{$value.author}}</li>
{{/each}}
</ul>
結果圖
