template前端模板动态渲染神器

• 查看演示
• 案例代码

tmod.js 最大的优点就可以代替JavaScript字符串拼接，还可以引用子模板。之前普通的开发模式使用JavaScript调用ajax，然后得到数据后，用JavaScript字符串拼接，然后插入到元素里面，比如下面这样：

var html = [];
html.push('' + val.lease_begin + '');
html.push('' + val.pay_date + '');
html.push('' + cashing_time + '');
$('table tr').html(html.join(''));
//这样看起来是不是很麻烦

使用tmod.js 可以省略字符串拼接，直接使用模板渲染，list 就是就是ajax 回来的数据，比如下面这样：

{{each list}}
    {{$value.name}}
   {{$value.age}}
 {{/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

是父模板页面

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模板

我是头部数据
{{each list}}
    
 
        {{if $value.age > 18}}
            索引{{$index}} ,
            名称{{$value.name}} ,
            年龄{{$value.age}} 
        {{/if}}
    
{{/each}}

footer.html模板

{{text}}

    {{each list}}
        
{{$value.title}},{{$value.author}}
    {{/each}}

结果图

image.png

• 如果是模块化开发的话点击这里