artTemplate的使用總結

使用原生語法，需要匯入template-native.js檔案。

在html中定義模板，注意模板的位置，不要放到被渲染區域，防止模板丟失。

$('#main_panel').html(template('main_panel_big_sale_template', data));

$('#main_panel').html(template('main_panel_big_sale_template', data));

template.helper('formatprice', function(price, type) else if (type =='decimal') 

}elseelse if (type =='decimal') 
}});

呼叫外部函式

原生<%=formatprice(product.promoprice,'integer')%>

簡潔}

簡潔語法的傳參有點奇怪，原生語法就很好理解，如果要傳遞三個引數，簡潔語法該怎麼寫呢？

簡潔語法的迴圈如果要做更多邏輯，也實現不了。

推薦使用原生語法

模板可以直接寫在js中，再編譯渲染。

var source = '';

var render = template.compile(source);
var html = render();
document.getelementbyid('content').innerhtml = html;

arttemplate巢狀迴圈，包含呼叫外部函式，直接看例子：

}

<
div 
class=
"col-lg-3 col-md-3 col-sm-3 col-xs-3 ana_btn3"
>
<
div 
class=
"thumbnail" 
style=
"border: 0 
solid white
">
}<
img 
src="" 
alt=
"responsive image" 
style=
"width: 99%"
>
}<
img 
src=
"}" 
alt=
"responsive image" 
style=
"width: 99%"
>
}<
div 
class=
"caption"
>
<
h3 style=
"color: #1b6d85; text-align: center
">}
h3>
}<
p class=
"" style=
"color: #777777;height: 40
px;overflow: hidden;text-overflow: ellipsis;text-align: center
">無摘要
p>
}<
p class=
"" style=
"color: #777777;height: 40
px;overflow: hidden;text-overflow: ellipsis;text-align: center
">}
p>}}
}<
p style=
"margin-top: 20
px;text-align: center
"><
a class=
"btn btn-primary" 
role=
"button" 
id="showdetails" 
οnclick=
"detailsshow()"
>檢視詳細資訊
a><
a style=
"margin-left: 10
px;color:#5ac8fa;cursor:pointer
" href=
"}" 
target=
"_blank" 
class=
"btn btn-default" 
role=
"button" 
id="mapopen" 
>在地圖中檢視
a>
p>}}
<
p style=
"margin-top: 20
px;text-align: center
"><
a class=
"btn btn-primary" 
role=
"button" 
id="showdetails" 
οnclick=
"detailsshow()"
>檢視詳細資訊
a><
a style=
"margin-left: 10
px;color:#5ac8fa;cursor:pointer
" href=
"}" 
target=
"_blank" 
class=
"btn btn-default" 
role=
"button" 
id="mapopen" 
>在地圖中檢視
a>
p>}}
<
p style=
"margin-top: 20
px;text-align: center
"><
a class=
"btn btn-primary" 
role=
"button" 
id="showdetails" 
οnclick=
"detailsshow()"
>檢視詳細資訊
a><
a style=
"margin-left: 10
px;color:#5ac8fa;cursor:pointer
" href=
"}" 
target=
"_blank" 
class=
"btn btn-default" 
role=
"button" 
id="mapopen" 
>在地圖中檢視
a>
p>}}
<
p style=
"margin-top: 20
px;text-align: center
"><
a class=
"btn btn-primary" 
role=
"button" 
id="showdetails" 
οnclick=
"detailsshow()"
>檢視詳細資訊
a><
a style=
"margin-left: 10
px;color:#5ac8fa;cursor:pointer
" href=
"}" 
target=
"_blank" 
class=
"btn btn-default" 
role=
"button" 
id="mapopen" 
>在地圖中檢視
a>
p>}}
<
p style=
"color: #dddddd; margin-top: 20
px;text-align: center
" id=
"fomatetime"
>}
p>
div>
div>
div>
}

var irender = template.compile(info);

var ihtmlitem = irender(infodata);

$("#testview").html(ihtmlitem);

artTemplate的使用總結

2.現在是編寫乙個存放html標籤的編寫模板，使用裝載，裡面的id是你到時候將確認將資料傳給誰的繫結，詳情請看下面 原聲語法就這種 if potics 相當於就是把你所要用的原聲js拿 包起來而已 3.然後就是渲染模板，下放 只是模仿的資料，如果小夥伴的資料是從後台獲取上來就把你從ajax獲取的da...

artTemplate使用筆記

一 1 引入template.js或者template.native.js template.js支援語法類似 template.native.js支援原生語法 2 建立模板 id tpl type text html script 3 函式template templateid,data 構建模板...

模板引擎art template的基本使用

資料 const template require art template const path require path const views path.join dirname,views 02.art const html template views,console.log html 一...