今天在模板上页面上渲染文本
但是渲染了半天,什么也没有渲染出来
为什么呢,你看我前台的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();
}
其实上面是整个渲染的一个过程,从后台返回数据,然后渲染到页面上
但是在做这个过程中出现一个问题,后台数据返回也是正常的,但是无论如何页面上也是现实不出来的
打断点调试:
上面这个地方一直为空字符串,原因在哪里,M.render(articleTemp,data) 这种情况之下一直是一个空字符串
然后我在用JSON.parse(data),来代替data发现数据可以渲染上去了
开心
下面是我的微信号期待大家的一起交流学习:
希望可以帮助大家