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