关于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 }] }]}