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 文件用来放模板页面
image.png
配置文件
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 回车
然后就可以看到监听文件模板的变化了，如果不监听，直接修改模板是没有效果的，在开发项目的时候一直开着监听就好。
image.png
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>
结果图
image.png
