js模板引擎artTemplate快速上手
阿新 • • 發佈:2019-01-06
騰訊的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(id, data)
根據 id 渲染模板。內部會根據document.getElementById(id)查詢模板,如果沒有
data 引數,那麼將返回一渲染函式。