今天在模闆上頁面上渲染文本
但是渲染了半天,什麼也沒有渲染出來
為什麼呢,你看我前台的html頁面如此:
<script type="text/x-template" id="articlelistTemp">
{{#articlelist}}
<li class="list-group-item">
<span style="float:left;">{{articlename}}</span>
<span style="padding-left:50px;">{{author}}</span>
<span style="float:right;">{{publishtime}}</span>
</li>
{{/articlelist}}
</script>
<script src="js/common/mustache.js"></script>
沒問題
然後我們來看看js:
var keyowrd="";
var $articlelist=$("#articlelist");
var articlelistTemp=clearHtml($("#articlelistTemp").html());
var M = Mustache;
function renderPager(pageIndex, pageSize, total) {
// 如已有分頁,先銷毀
if ($pager.pagination()) {
$pager.pagination('destroy');
}
if (!total) {
return false;
}
// 生成分頁
$pager.pagination({
pageSize : pageSize,
pageIndex : pageIndex,
total : total
});
// 分頁控件綁定事件
$pager.on('pageClicked', function(event, data) {
buildList(keyword, data.pageIndex, data.pageSize);
}).on('jumpClicked', function(event, data) {
buildList(keyword, data.pageIndex, data.pageSize);
});
}
function buildList(keyword, pageIndex, pageSize) {
var params = {
"keyword" : keyword,
"pagesize" : pageSize,
"currentpage" : pageIndex
};
var json = JSON.stringify(params);
$.ajax({
url : localhostPaht + projectName + "/articleinfo/getarticlelist",
data:json,
type : 'post',
contentType : 'application/json;charset=utf-8',
success : function(data) {
//使用模闆将資料渲染到頁面上
M.parse(articlelistTemp);
var rendered = M.render(articlelistTemp, JSON.parse(data));
$articlelist.html(rendered);
console.log(data);
},
error : function(error) {
console.log('接口不通' + error);
}
});
}
buildList("", 0, 5);
這個地方其實也用到的分頁,我們來看看java背景的傳回接口:
/**
* 擷取文章清單
*
* @param reqMap
* @return
*/
@RequestMapping("/getarticlelist")
public @ResponseBody String getArticleList(@RequestBody Map<String, String> reqMap) {
String keyword = reqMap.get("keyword");
int pagesize = Integer.parseInt(reqMap.get("pagesize"));
int pagenum = Integer.parseInt(reqMap.get("currentpage"));
JSONObject jsonRtn = new JSONObject();
List<ArticleInfo> list = articleService.getArticleListByKeyword(keyword, pagesize, pagenum);
JSONArray json_arr = new JSONArray();
for (ArticleInfo article : list) {
JSONObject object = new JSONObject();
object.put("articlename", article.getArticleName());
object.put("author", article.getAuthor());
object.put("publishtime", article.getPublishTime());
json_arr.add(object);
}
jsonRtn.put("articlelist",json_arr);
return jsonRtn.toString();
}
其實上面是整個渲染的一個過程,從背景傳回資料,然後渲染到頁面上
但是在做這個過程中出現一個問題,背景資料傳回也是正常的,但是無論如何頁面上也是現實不出來的
打斷點調試:
![](https://img.laitimes.com/img/_0nNw4CM6IyYiwiM6ICdiwiI0gTMx81dsQWZ4lmZf1GLlpXazVmcvwFciV2dsQXYtJ3bm9CX9s2RkBnVHFmb1clWvB3MaVnRtp1XlBXe0xCMy81dvRWYoNHLwEzX5xCMx8FesU2cfdGLwMzX0xiRGZkRGZ0Xy9GbvNGLpZTY1EmMZVDUSFTU4VFRR9Fd4VGdsYTMfVmepNHLrJXYtJXZ0F2dvwVZnFWbp1zczV2YvJHctM3cv1Ce-cmbw5CN4QDM1UWMyYGO1cjMhZzYyYzX1ADOwcTM3AzLcdDMyIDMy8CXn9Gbi9CXzV2Zh1WavwVbvNmLvR3YxUjLyM3Lc9CX6MHc0RHaiojIsJye.png)
上面這個地方一直為空字元串,原因在哪裡,M.render(articleTemp,data) 這種情況之下一直是一個空字元串