js模板引擎artTemplate快速上手

腾讯的artTemplate

1，编写模板

(采用script标签并带有属性id和type="text/html")

<script id="test" type="text/html"> {{if isAdmin}} <h1>{{author}}</h1> <ul> {{each list as value i}} <li>{{i+1}}:{{value}}</li> {{/each}} </ul> {{/if}} </script>

2， 渲染模板

var data = { author: '宫崎骏', isAdmin: true, list: ['千与千寻', '哈尔的移动城堡', '幽灵公主', '风之谷', '龙猫'] }; var html = template('test', data); document.getElementById('content').innerHTML = html;

  模板语法

有两个版本的模板语法可以选择。

      1.简洁语法，采用"{{ }}"

原生语法(采用"<%= %>")

使用原生语法，需要导入template-native.js文件。

template.js (简洁语法版, 2.7kb)

template-native.js (原生语法版, 2.3kb)

方法

template(id, data)

 根据 id 渲染模板。内部会根据document.getElementById(id)查找模板，如果没有 data 参数，那么将返回一渲染函数。

https://www.cnblogs.com/Leo_wl/p/5562012.html

http://www.jianshu.com/p/483fa7f6f55b

https://github.com/aui/art-template