mustache 渲染文本一直渲染不出来

今天在模板上页面上渲染文本

但是渲染了半天,什么也没有渲染出来

为什么呢,你看我前台的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发现数据可以渲染上去了

开心 

下面是我的微信号期待大家的一起交流学习:

                                                      

希望可以帮助大家

猜你喜欢

转载自blog.csdn.net/datouniao1/article/details/81585989