requirejs整合art-template模板引擎
生活随笔
收集整理的這篇文章主要介紹了
requirejs整合art-template模板引擎
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
相關(guān)官網(wǎng)
requirejs官網(wǎng)
art-template模板引擎官網(wǎng)
目錄結(jié)構(gòu)
文件目錄介紹：
domReady.js /用于暫停上層應用的執(zhí)行，直到DOM準備好再進行 查詢/修改（requirejs插件）
i18n.js /使用國際化（requirejs插件）
template-web.js /art-template模板引擎
text.js /可以在加載text字符（requirejs插件）
list.tpl /具體業(yè)務 模板引擎模板
main.js /啟動js
require.js / requirejs
index.html /首頁 html
主要代碼
1.index.html
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>requirejs</title><script src="js/require.js" data-main="js/main"></script> </head> <body><div id="content"></div> </body> </html>2.main.js
requirejs.config({baseUrl: 'js/public',paths: {'art-template': '../lib/template-web','text': '../lib/text','list': 'template/list.tpl'} });requirejs(['text!list','art-template'],function(list,template){var data = {title: '基本例子',isAdmin: true,list: ['文藝', '博客', '攝影', '電影', '民謠', '旅行', '吉他']};var html = template.render(list, data);document.getElementById('content').innerHTML = html; });3.list.tpl
{{if isAdmin}} <h1>{{title}}</h1> <ul>{{each list value i}}<li>索引 {{i + 1}} ：{{value}}</li>{{/each}} </ul> {{/if}} {{$data}}結(jié)果頁面：
注意：如果要單都引用一個模板頁面，需要在服務器端運行，否則回報跨域的錯誤，模板引擎的模板是不是標準的html和script，可以將模板文件的后綴設為tpl，結(jié)合require的text插件能將模板文件讀取為text文本，再渲染為html。
總結(jié)
以上是生活随笔為你收集整理的requirejs整合art-template模板引擎的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Lifewire文档阅读笔记-如何使用I
- 下一篇： 麒麟810处理器_何刚口中第二颗7nm处