Hbulider里面template模板自用

template.js 一款 JavaScript 模板引擎，简单，好用。提供一套模板语法，用户可以写一个模板区块，每次根据传入的数据，生成对应数据产生的HTML片段，渲染不同的效果。

特性：

• 模版编译，渲染

• 支持所有主流浏览器及Node（UMD）

• JavaScript原生语法

• 可自定义配置

• 支持数据过滤

• 功能专一，简单好用

兼容性：

• Node 0.10+

• Safari 6+ (Mac)

• iOS 5+ Safari

• Chrome 23+ (Windows, Mac, Android, iOS, Linux, Chrome OS)

• Firefox 4+ (Windows, Mac, Android, Linux, Firefox OS)

• Internet Explorer 6+ (Windows, Windows Phone)

• Opera 10+ (Windows, linux, Android

 

编写模版

使用一个type="text/html"的script标签存放模板，或者放到字符串中：

<script id="tableViewTemple" type="text/html">

     <ul>

        {{each datas as value i}}

           <li>{{value.name}}</li>

        {{/each}}

     </ul>

</script>

填充模板

var userlist = document.getElementById('userlist');

userlist.innerHTML = template('tableViewTemple', {datas: [{name: "张三"},{name: "李四"},{name: "王五"}]});

输出结果：

<ul>

   <li>张三</li>

   <li>李四</li>

   <li>王五</li>

</ul>