关于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 }] }]}
相关推荐
Mustache 是一个 logic-less (轻逻辑)模板解析引擎,它的优势在于可以应用在javascript、PHP、Python、Perl 等多种编程语言中
Mustache模板语言在Go中的一个实现
Phly Mustache一个PHP实现的Mustache模板语言类库,感兴趣的朋友们可以下载下来,用到自己的项目中。
PHP实现的Mustache模板语言类库,感兴趣的朋友们可以下载下来,用到自己的项目中。
PHP实现的Mustache模板语言类库
Mustache:一个Mustache模板语言的PHP实现
mustache - Mustache模板语言的一个Go实现
JavaScript的{{mustache}}模板引擎的一个极其快速和小的子实现
mo - 用纯bash实现的Mustache 模板
Perfect Mustache - 为Perfect提供Mustache模板支持
MuttonChop - Swift中的Mustache模板(100%规范兼容)
让我们创建一个输出单个值的简单 Mustache 模板。 首先,创建一个名为simple.ms的文件(不需要.ms扩展名;你可以使用任何你想要的)。 #lang mustache Hey! this is my { {adjective } } Mustache template. 请...
JetBrains IDE的/ 模板插件 IDEA-Handlebars在基于Intellij IDEA平台(IntelliJ IDEA,IDEA社区版,RubyMine,PhpStorm,WebStorm,PyCharm,AppCode)的IDE中添加了对和模板的支持。 把手/胡子现在是官方插件! 已...
Mizuhiki - 与 Clazz 的数据绑定 Mizuhiki 是一个模块: 需要一个模板类 读取其模板 通过 mustache 解析它(有一个小的变化来处理绑定到数组) 使用 dojo 呈现它 通过 setter 和 getter 将 dom 绑定到类属性 连接 ...
通过这种方式,我们可以立即获得 Mustache 模板的性能提升,而无需更改它们或使用其他模板语言。 用法 $ cleanshave -t templates/ -d domplates/ 安装 使用 npm 安装: $ npm install -g cleanshave 好处 ...
stache:Mustache模板编译器
野马 胡子模板的命令行工具,从各种数据源生成输出抽象的Mustang 是一个命令行工具,通过应用 mustache 模板从各种数据源(例如 CSV/JSON 文件、URL、MySQL、MongoDB)生成所需的输出。安装 $ npm install -g ...
(积分会自动改,需要的留言)实例https://blog.csdn.net/github_38854224/article/details/88012869
前端模板引擎Mustache教程.zip 现在前端模块引擎如雨手春笋般出现,当然也多如牛毛 今天来介绍一款我用得还不错的前端引擎Mustache大胡子
将 mustache 模板编译成一个可调用的、可调用的函数。 安装 $ npm install -g mustache-cache 用法 Usage: mustache-cache <template> [options] Options: -h, --help output usage information -V, --version ...