artTemplate模板引擎

使用乙個type="text/html"的script標籤存放模板：

template.render(id, data)

var data = ;

var html = template.render('test', data);
document.getelementbyid('content').innerhtml = html;

1

編寫模板23
使用乙個type="text/html"的script標籤存放模板：45
<
script 
id="test"
type
="text/html"
>
6<
h1><%=
title
%><
/h1>
7<
ul>
8<%
for(i =0
; i 
<
list.length; i 
++) 
%>
11<
/ul>
12script
>
13 模板邏輯語法開始與結束的界定符號為<%
與%>，若<%
後面緊跟
=號則輸出變數內容。
1415
渲染模板
1617
template.render(id, data)
1819
var data =;
23var html 
=template.render(
'test', data);
24document.getelementbyid(
'content').innerhtml = html;
25嵌入子模板
2627
<
%include(id, [data])
%>
語句可以嵌入子模板，其中第二個引數是可選的，它預設傳入當前的資料。
2829
<
script 
id="test"
type
="text/html"
>
30<
h1><%=
title
%><
/h1>
31<%
include(
'list')
%>
32script
>
3334
<
script 
id="list"
type
="text/html"
>
35<
ul>
36<%
for(i =0
; i 
<
list.length; i 
++) 
%>
39<
/ul>
40script
>
41[html] view plain copy 在code上檢視**片派生到我的**片
42doctype html
>
43<
html
>
44<
head
>
45<
meta 
charset
="utf-8"
>
46<
title
>include demo
title
>
47<
script 
src="template.js"
>
script
>
48head
>
4950
<
body
>
51<
div 
id="content"
>
div>
52<
div 
id="tagcontent"
>
div>
53<
script 
id="targettemplate"
type
="text/html"
>
54<
h1><%=
title
%><
/h1>  
55<%
include(
'list')
%>
56<%
include(
'tvalue')
%>
57script
>
58<
script 
id="list"
type
="text/html"
>
59<
ul>
60<%
for(
vari=0
; i<
listitems.length; i++)
%>
63<
/ul>       
64script
>
65<
script 
id="tvalue"
type
="text/html"
>
66<
p>
不轉義:
<%==
trans
%>
or <%=
#trans
%><
/p>  
67<
p>
預設轉義: 
<%=
trans
%><
/p>  
68script
>
6970
<
script
>
71var
data 
=;  
76var
logintsorse='
'78+'
使用arttemplate來編寫：<%=title%>
';  
7980
varhtml 
=template.render(
'targettemplate
', data);  
8182
varrender 
=template.compile(logintsorse);  
83var
compilehtml 
=render(data);  
8485
document.getelementbyid(
'content
').innerhtml 
=html
+compilehtml;          
86script
>
8788
<
script 
id="customtag"
type
="text/html"
>
89<
h1><
/h1>  
90<
ul>
9192
<
li>
條目內容
: <
/li>  
9394
<
/ul>   
95script
>
96<
script
>
97template.opentag ='
';  
99var
listdata 
=;  
103var
resulthtml 
=template.render (
'customtag
', listdata);         
104document.getelementbyid(
'tagcontent
').innerhtml 
=resulthtml;  
105106
//107
script
>
108body
>
109110
html
>

art template模板引擎

1.模板語法 2.輸出 將某項資料輸出在模板中 3.原文輸出 如果資料中攜帶html標籤，預設模板引擎不會解析標籤，會將其轉義後輸出 4.條件判斷 在模板中可以根據條件來決定顯示哪塊html 5.迴圈 6.子模版 使用子模版可以將 公共區塊 頭部 底部 抽離到單獨的檔案中 7.模板繼承 使用模板繼承...

ArtTemplate模板引擎入門

天下武功，唯快不破 對的，arttemplate模板引擎最大的特點就是乙個 快 字，但是這套模板引擎官方github上的文件相當地精簡，雖然有完整的demo，但是說真的，也不知道是不是我智商不夠用，研究了一下午才把這套模板引擎應用到了我的web專案裡。id art container div id ...

art template前端模板引擎

偶然看到後台有一段 採用的是art template的模板引擎 位址為 這段 很簡潔 var html template detail artdialog 主要用的是template方法 渲染html 渲染結束得到html賦值然後顯示，後來檢視了一下官方的例子講解的比較好，只要引入 dist tem...