本文轉自：http://book.2cto.com/201406/43974.html
本文所屬圖書 > Backbone.js實戰
在Underscore庫中，template()是一個十分重要的函數，這個輕量級的函數可以幫助開發人員有效地組織頁面的結構和底層邏輯。該函數可以解析3種模板標簽，分別如表2-2所示。
表2-2 template()函數模板標簽 模板標簽 功能描述 <% %> 標簽中包含的通常是JavaScript代碼，在頁面渲染數據時被執行 <%= %> 標簽中包含的通常是變量名、函數名、對象屬性，執行時直接展現調用后的數據 <%- %> 標簽在輸出數據時，能將HTML標記轉成常用字符串形成，以避免代碼的攻擊
template()函數的調用格式如下。 _.template(templateString, [data], [settings])
其中，參數templateString就是模板標簽，可選參數data為渲染標簽的數據，可選參數settings為自定義模板標簽的字符格式，比如可以將<% %>修改為{% %}格式，接下來通過簡單的示例逐一進行介紹。
1. <% %>模板標簽
<% %>在template()函數中使用時，在它包含處可以執行任意的JavaScript代碼，同時允許在調用template()函數時使用對象屬性的方式傳遞參數值。示例如下。 var tpl = _.template("<%console.log(str)%>"); tpl({ str: '姓名：陶國榮' });
在上述代碼中，首先使用<% %>模板標簽調用template()函數。在標簽中，將通過控制台輸出指定的任意字符，然后執行tpl函數，執行時使用對象屬性的方式向標簽中的形參變量賦值。最終在Chrome瀏覽器的控制台輸出的效果如圖2-30所示。 
2. <%= %>模板標簽
與<% %>模板標簽不同，<%= %>模板標簽可以直接顯示變量或函數的結果。它的功能是輸出數據，而不是執行。因此，如果想使用<%= %>模板標簽實現與圖2-30同樣的效果，代碼修改如下。 var tpl = _.template("<%=str%>"); console.log(tpl({ str: '姓名：陶國榮' }));
上述代碼中的tpl函數可以顯示傳入的任意字符內容，當在控制台輸出該函數時，其實現的頁面效果與圖2-30完全一致。
3. <%- %>模板標簽
<%- %>與<%= %>模板標簽的功能基本相同，不同之處在於，<%- %>模板標簽不僅可以輸出變量或函數的結果，而且可以將結果中的HTML代碼轉成字符形式，以避免代碼受到攻擊。如果希望只返回字符串，使用<%- %>模板標簽是一個不錯的選擇。示例如下。 var tpl = _.template("<%-str%>"); console.log(tpl({ str: "姓/'名'&：<陶>國榮" }));
在上述代碼的輸出結果中，添加一些任意的HTML格式代碼，而當使用<%- %>模板標簽輸出這些內容時，其中的HTML代碼會轉成轉義字符。它的轉換標准與前面介紹的escape()函數一樣，只是針對部分HTML代碼進行替換，並不是全部。最終在Chrome瀏覽器的控制台輸出的效果如圖2-31所示。 
示例2-1 <script>模板標簽的使用
與上述三種模板標簽都不相同，<script>模板標簽是在HTML頁面中進行聲明的，聲明的標志是將該標簽的type屬性值設置為“text/template”，即表示這是一個模板標簽。在模板標簽中，還可以添加<% %>和<%= %>標簽來組織和布局頁面的結構，然后調用template()函數，通過ID號綁定<script>模板標簽，並將可選參數data的內容渲染到模板標簽中對應的對象屬性中，從而實現根據模板綁定數據的頁面效果。接下來通過一個示例進行詳細介紹。
1. 功能描述
在頁面中，首先使用<script>標簽的方式自定義模板；然后創建一個數據源，調用template()函數解析模板，並將數據源填充至模板中並返回填充后的模板內容；最后將填充后的模板內容追加到頁面的渲染元素內，從而最終實現根據自定義模板展示數據的功能。
2. 實現代碼
新建一個HTML文件tpl.html，加入如代碼清單2-1所示的代碼。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>template自定義模板</title> <script src="Js/jquery-1.8.2.min.js" type="text/javascript"></script> <script src="Js/underscore-min.js" type="text/javascript"></script> <style type="text/css"> body{ font-size:13px;} ul{ list-style-type:none; padding:0px;margin:0px;width:360px } li:first-child span{ float:left; border-bottom:solid 1px #ccc;background-color:#eee; font-weight:bold } ul li span{ width:80px;text-align:left;float:left; padding:0px 5px;border-bottom:dashed 1px #ccc; line-height:28px;} </style> </head> <body> <script type="text/template" id="tpl"> <% var intSumScore=0,intAveScore=0; for(var i = 0; i < list.length; i++) { %> <% var item = list[i] %> <li> <span><%=item.StuId%></span> <span><%=item.Name%></span> <span><%=item.Sex%></span> <span><%=item.Score%></span> </li> <% intSumScore+=parseInt(item.Score) intAveScore=intSumScore/list.length; } %> <li> <span>平均分：</span> <span><%=intAveScore%></span> <span>總分：</span> <span><%=intSumScore%></span> </li> </script> <ul id="element"> <li> <span>學號</span> <span>姓名</span> <span>性別</span> <span>總分</span> </li> </ul> <script type="text/javascript"> var ele = $('#element'), tpl = $('#tpl').html(); var data = { list: [ { StuId: 's0101', Name: '劉小明', Sex: '男', Score: '345' }, { StuId: 's0102', Name: '李清燕', Sex: '女', Score: '445' }, { StuId: 's0103', Name: '張二保', Sex: '男', Score: '355' }, { StuId: 's0104', Name: '陳明基', Sex: '男', Score: '564' }, { StuId: 's0105', Name: '舒明珠', Sex: '女', Score: '543' } ] } var html = _.template(tpl, data); ele.append(html); </script> </body> </html>
3. 頁面效果
執行代碼后的效果如圖2-32所示。 
4. 源碼分析
HTML頁面代碼由三部分組成：第一部分是<script>元素的模板標簽，第二部分是頁面中用於渲染填充數據的元素，第三部分是編寫JavaScript代碼、創建數據、綁定模板、渲染數據。接下來我們逐一進行介紹。
1）在<script>元素的模板標簽中，分別使用<% %>、<%= %>標簽來執行代碼和顯示數據，在執行代碼時，先定義了兩個變量，用於保存數據中的總分數和平均分數值，然后使用for語句遍歷填充數據的數組對象list。在遍歷過程中，使用<%= %>標簽直接顯示對象中的各項元素，同時計算總分數和平均分數值，最后將獲取的這兩項數值使用<%= %>標簽的方式直接顯示在<span>元素中。
2）在頁面渲染元素ID號為“element”的<ul>元素中，先添加一個<li>元素，用於填充數據的標題部分，全部的填充數據通過追加的方式添加至該元素中。
3）在頁面的JavaScript代碼部分，首先定義兩個變量ele和tpl，分別用於保存頁面的渲染元素和模板內容；然后創建一個數據對象data，這個對象也可以通過請求服務端的數據接口進行返回；調用template()函數解析模板，並將創建的數據對象填充至模板中，同時，執行該函數后，返回一個數據填充至模板后的內容；最后，通過append()方法將該內容追加到頁面的渲染元素中，最終實現通過template()函數綁定並顯示的頁面效果。