template前端模板动态渲染神器

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

推荐阅读更多精彩内容