Mustache模板遍历输出数据

最新推荐文章于 2023-08-07 18:02:07 发布

原创最新推荐文章于 2023-08-07 18:02:07 发布 · 1.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#json #javascript #ViewUI

js 专栏收录该内容

27 篇文章

订阅专栏

本文详细介绍了如何利用Mustache模板引擎在页面中动态加载内容，通过定义模板和触发JS方法来实现数据的实时更新。文章还展示了后台服务器处理请求并返回JSON数据，前端则使用Mustache模板进行数据填充的过程。

关于Mustache模板引擎的用法，大家可以看这里:http://www.fantxi.com/blog/archives/mustache-template/

或者各种百度google

这里说下自己实际用到的情况

首先页面定义好模板，关键循环遍历的是这个 {{#talentMedals}}标签下面的内容

<ul style="display:none;" id="hidePart_${map.key}"></ul>
<p class="pBtnMore"><a id="aChange_${map.key}" href="javascript:loadMoreTalents(${map.key})" class="aChange">加载更多</a></p>

<script id="tmpl1" type="text-x-mustache-tmpl">
	 <li>
	   <i class="iPic"><a href="{{link}}" target="_blank"><img src="{{img}}" width="85" height="85" /></a></i>
	   <i class="iTxt">
		 <span class="sTit"><a href="{{link}}">{{nickName}}</a><a href="" target="_blank" class="aKing" title="{{levelName}}">{{level}}</a></span>
		 <span class="sCon">
		 {{#talentMedals}}
		 <a href="" class="aCon{{no}}" title="{{medalName}}"></a>
		 {{/talentMedals}}
		</span>
	   </i>
	</li>
</script>

页面触发的js方法：

function loadMoreTalents(medalId) {
		var pageNo = 2;
		var pageSize = 2;
		
		$.post("${ROOT}/talent/loadMoreTalents.do?medalId=" + medalId +"&pageNo=" + pageNo + "&pageSize=" + pageSize,"",function(data){
			alert(data.items);
			//n++;
			pageNo ++;
			var itemTmpl = $('#tmpl1').html();
			alert(itemTmpl);
			var res = [];
			$.each(data.items, function(i, item){
				res.push(Mustache.to_html(itemTmpl, item));
			});
			var savedCmt = $("#hidePart_" + medalId).html();
			alert("saveCmt:" + savedCmt);
			$("#hidePart_" + medalId).html(savedCmt + res.join(""));
			$("#hidePart_" + medalId).show();
			/* if ( pageNo >= 1) {
				$("#hidePart" + medalId).parent().hide();              
			} */
			
		},"json");
	}

后台服务器方法：

@RequestMapping(value="/talent/loadMoreTalents.do")
    public void loadMoreTalents(HttpServletRequest request, HttpServletResponse response) throws Exception {
    	long medalId = EnvUtils.getEnv().paramLong("medalId",0);
    	int pageNo = EnvUtils.getEnv().paramInt("pageNo",2);
    	int pageSize = EnvUtils.getEnv().paramInt("pageSize",3);
    	
    	List<Talent> talents = talentService.listTalentsByMedalId(pageNo, pageSize, medalId);
    	
    	JSONArray jsonArray = new JSONArray();
    	if(talents != null && !talents.isEmpty()) {
    		JSONObject json = null;
    		for(Talent talent : talents) {
    			json = new JSONObject();
    			long passportId = talent.getUser().getPassportId();
    			String userImgStr = T.face(passportId, "http://dev2.pclady.com.cn:9192/upchead/", "70x70");
    			json.put("link", "/users/otherUser.do?userId=" + talent.getUser().getUserId());
    			json.put("img", userImgStr);
    			json.put("nickName", talent.getUser().getNickName());
    			json.put("levelName", talent.getTalentLevel().getName());
    			json.put("level", talent.getTalentLevel().getLevel());
    			Map<Integer, Medal> map = talent.getMedals();
    			Iterator<Integer> it = map.keySet().iterator();
    			JSONArray medalArray = new JSONArray();
    			while(it.hasNext()) {
    				int id = it.next();
    				Medal medal = map.get(id);
    				JSONObject medalJson = null;
    				if(medal != null) {
    					medalJson = new JSONObject();
    					medalJson.put("no", id);
    					medalJson.put("medalName", medal.getName());
    					medalArray.add(medalJson);
    				}
    				
    			}
    			json.put("talentMedals", medalArray);
    			jsonArray.add(json);
    			
    		}
    	} 
    	
    	String str = "{\"items\":" + jsonArray.toJSONString()+"}";
    	System.out.println("------------items-----> " + str);
    	response.getWriter().println(str);
    }

可以看到，返回的结果是：

{"items":[{
	"img": "http://dev2.pclady.com.cn:9192/upchead//38/8/388_70x70",
	"level": 2,
	"levelName": "2级达人",
	"link": "/users/otherUser.do?userId=99",
	"nickName": "fish",
	"talentMedals": [{
		"medalName": "美容",
		"no": 1
	},
	{
		"medalName": "时尚",
		"no": 2
	}]
},
{
	"img": "http://dev2.pclady.com.cn:9192/upchead//90/3/903_70x70",
	"level": 2,
	"levelName": "2级达人",
	"link": "/users/otherUser.do?userId=100",
	"nickName": "handy",
	"talentMedals": [{
		"medalName": "彩妆",
		"no": 3
	},
	{
		"medalName": "点评",
		"no": 5
	}]
}]}