jQuery Templates Plugin筆記4
0 | 9,493 |
這篇筆記介紹兩個在範本中可用的範本標籤{{if}} {{html}}。
{{if}}可以依資料值產生不同的結果,記得要以{{/if}}結尾,其中還可加入{{else}}分支。
一般而言,${資料物件屬性名}傳回的結果會經過HtmlEncode轉碼,例如,若data.prop1 = “<b>Bold</b>”,<div>${prop1}</div>產出結果將會是<div><b>Bold</b></div>;若想產出<div><b>Bold</b></div>,則要寫成{{html prop1}}。
很簡單吧? 程式範例也很簡單:
排版顯示純文字
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Templates Lab 4 - 範本Tag {{html}}</title>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.4.js"
type="text/javascript"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js"
type="text/javascript"></script>
<!--
{{html}}可以將資料值視為原始HTML標籤
{{if}}, {{else}}可以依資料值套用不同的區塊
-->
<script type="text/x-jquery-tmpl" id="tmplItem">
<tr><td>${No}</td><td>{{html Name}}</td><td>
<span {{if Score < 60}}style="background-color:red;color:yellow"{{/if}}>
${Score}
</span>
</td></tr>
</script>
<script type="text/javascript">
$(function () {
var data = [
{ No: 1, Name: "Jeffrey", Score: 59 },
{ No: 2, Name: "<b>Darkthread</b>", Score: 75 },
{ No: 3, Name: "<span style='color:red'>Linda</span>", Score: 96 }
];
//將結果附加到DOM顯示出來
$("#tmplItem").tmpl(data).appendTo("#tb");
});
</script>
</head>
<body>
<table><tbody id="tb"></tbody></table>
</body>
</html>
Comments
Be the first to post a comment