```
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>4使用underscore.js</title>
<!--weui.css僅為快速的做出頁面，可刪除-->
<link rel="stylesheet" href="http://me.52fhy.com/demo/jstemp/static/weui.css"/>
<script src="static/zepto.min.js"></script>
<!--引入underscore.js-->
<script src="static/underscore-min.js"></script>
</head>
<body>
<div class="weui_panel weui_panel_access">
<div class="weui_panel_hd">文章列表</div>
<div class="weui_panel_bd js-blog-list">
</div>
</div>
<!--模板-->
<textarea class="js-tmp" style="display:none;">
<div class="weui_media_box weui_media_text">
<a href="<%= url %>" class="" target="_blank">
<h4 class="weui_media_title"><%= title %></h4>
</a>
<p class="weui_media_desc"><%= desc %></p>
</div>
</textarea>
<!--/模板-->
<script type="text/javascript">
/*
Underscore.js(1.8.3) 中文文檔 http://www.css88.com/doc/underscore/
template_.template(templateString, [settings])
將 JavaScript 模板編譯為可以用于頁面呈現的函數,
對于通過JSON數據源生成復雜的HTML并呈現出來的操作非常有用。
模板函數可以使用 <%= … %>插入變量, 也可以用<% … %>執行任意的 JavaScript 代碼。
如果您希望插入一個值, 并讓其進行HTML轉義,請使用<%- … %>。
當你要給模板函數賦值的時候，可以傳遞一個含有與模板對應屬性的data對象 。
如果您要寫一個一次性的, 您可以傳對象 data 作為第二個參數給模板 template 來直接呈現,
這樣頁面會立即呈現而不是返回一個模板函數。
*/
$(function(){
$.ajax({
url: 'static/blog.json',
type: 'get',
dataType: 'json',
success: function (response) {
var htmlList = '';
var data = response.list;
var htmlTemp = $("textarea.js-tmp").val();
$.each(data, function(i,el) {
//htmlList += htmlTemp.temp(el);
//htmlList += laytpl(htmlTemp).render(el);
/*可以這樣：*/
//var compiled = _.template(htmlTemp);
//htmlList += compiled(el);
/*或者*/
htmlList += _.template(htmlTemp)(el);
});
$('.js-blog-list').empty().append(htmlList);
},
error: function (jqXHR, textStatus, errorThrown) {
if (textStatus == 'timeout') {
alert('請求超時');
return false;
}
console.log(jqXHR.responseText);
},
});
});
</script>
</body>
```
