artTemplate 簡介語法模板
1.編輯模板，template(id, data)
根據 id 渲染模板。內部會根據document.getElementById(id)查找模板。
如果沒有 data 參數，那麽將返回一渲染函數。有data那麽就返回Html。
var data = { title: ‘標簽‘, list: [‘文藝‘, ‘博客‘, ‘攝影‘, ‘電影‘, ‘民謠‘, ‘旅行‘, ‘吉他‘] }; var html = template(‘test‘, data); document.getElementById(‘content‘).innerHTML = html; <script id="test" type="text/html"> <h1>{{title}}</h1>//直接使用data裏的屬性title <ul> {{each list as value i}}//直接可遍歷data裏面的list屬性，list是一個數組 <li>索引 {{i + 1}} ：{{value}}</li> {{/each}} </ul> </script> //渲染數據 var data = { title: ‘標簽‘, list: [‘文藝‘, ‘博客‘, ‘攝影‘, ‘電影‘, ‘民謠‘, ‘旅行‘, ‘吉他‘] }; varhtml = template(‘test‘, data); document.getElementById(‘content‘).innerHTML = html
1.</pre><pre name="code" class="javascript">
<script id="test" type="text/html"> 2.{{if admin}} 3. {{each list as value index}} 4. <div>{{index}}:{{value}}</div> 5. {{/each}}6.{{else if}} 7.條件判斷 8.{{/if}} </script>
<script id="content" type="text/html"> {{if isAdmin}} <h1>{{title}}</h1> <ul> {{each list as value index}} <li>索引：{{index}}:{{value}}</li> {{/each}} </ul> {{/if}} </script> · <script> var data = { title: "hello world", isAdmin: true, list: [‘新聞‘,‘軍事‘,‘歷史‘,‘政治‘] }； var html = template(‘content‘,data); document.getElementById(‘div1‘).innerHTML = html; </script>
2.語法
- 表達式
{{ 與 }} 符號包裹起來的語句則為模板的邏輯表達式。
- 輸出表達式
對內容編碼輸出：
{{content}}
不編碼輸出：
{{#content}}
註意：編碼可以防止數據中含有 HTML 字符串，避免引起 XSS 攻擊。
- 條件表達式
{{if admin}}
<p>admin</p>
{{else if code > 0}}
<p>master</p>
{{else}}
<p>error!</p>
{{/if}}
- 遍歷表達式
無論數組或者對象都可以用 each 進行遍歷。
{{each list as value index}}
<li>{{index}} - {{value.user}}</li>
{{/each}}
//亦可以被簡寫：
{{each list}}
<li>{{$index}} - {{$value.user}}</li>
{{/each}}
3.artTemplate模板中的簡潔語法循環嵌套
試試 {{each albums ...}} 改成 {{each $value.albums ...}}
- 模板包含表達式
用於嵌入子模板。
{{include ‘template_name‘}}
子模板默認共享當前數據，亦可以指定數據：
{{include ‘template_name‘ news_list}}
- 輔助方法
嵌入子模板(include)
嵌套模板跟第一種方法原理相同，只不過在一個模板中調用了另外一個模板而已。
<script id=‘test‘ type=‘text/html‘>
<h1>My Life</h1>
{{include ‘list‘}}
</script>
<script id=‘list‘ type=‘text/html‘>
<ul>
{{each list as value i}}
<li>索引{{i+1}}：{{value}}</li>
{{/each}}
</ul>
</script>
<script>
var data = {
"list":[‘籃球‘,‘桌球‘,‘遊泳‘,‘滑輪‘,‘讀書‘]
};
var html = template(‘test‘,data);
$(‘.rascal‘).html(html);
</script>
上面代碼中，要註意幾點的就是：
? 遍歷表達式中的list必須與腳本中data對象中的list同名，而且遍歷表達式中的list必須是data對象中的一個屬性。循環表達式中，要循環的是每一個data對象中的list數組，而不是data對象，這點很重要。
在這個例子中，data對象中list屬性是一個數組，數組中的每一個值都是簡單數據類型，籃球桌球等。當然，可以往數組中傳入復雜數據類型，如對象。說明這個主要是因為在循環表達式中循環的數據和給template()傳入第二個參數的時候很容易出錯。
? 使用template方法時，第一個參數必須是id，而不能是class。
使用template.helper(name, callback)註冊公用輔助方法：
template.helper(‘dateFormat‘, function (date, format) { // .. return value; });
模板中使用的方式：
{{time | dateFormat:‘yyyy-MM-dd hh:mm:ss‘}}
支持傳入參數與嵌套使用：
{{time | say:‘cd‘ | ubb | link}}
<script id="template_miniClassCpListPopover" type="text/html">
<table class="miniClassNamePopover textOverflowEllipsis" style="padding:0;width:622px;">
<tbody>
{{each items as item}}//遍歷items數組，items數組是一個對象數組
<tr>
<td title="{{item.productName}}" >{{item.productName}}</td>
<td title="{{item.signDate}}">{{item.signDate}}</td>
<td>{{#paidStatusText(item.paidStatus)}}</td>
<td class="width150" title="{{quantityText(item.quantity,item.planAmount)}}">{{quantityText(item.quantity,item.planAmount)}}</td>
<td class="width150" title="{{remainHourText(item.remainHour,item.remainFund)}}">{{remainHourText(item.remainHour,item.remainFund)}}</td>
</tr>
{{/each}}
</tbody>
</table>
</script>
//調用的方法
template.helper(‘paidStatusText‘, function (data) {
if(data == ‘PAYING‘){
return "<div style=‘color:#488ffa;‘>付款中</div>";
}else if(data == ‘UNPAY‘){
return "<div style=‘color:#ff6666;‘>未付款</div>";
}else if(data == ‘PAID‘){
return "<div style=‘color:#55be97;‘>已付款</div>";
}
})
template.helper(‘quantityText‘, function (data,amount) {
return data+"課時 / "+amount.toFixed(2)+"元";
})
template.helper(‘seatNumText‘, function (data) {
return data == null?"-":data;
})
template.helper(‘remainHourText‘, function (data,fund) {
return data+"課時 / "+fund.toFixed(2)+"元";
})
artTemplate 簡介語法模板