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发现数据可以渲染上去了

开心

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

希望可以帮助大家

mustache 渲染文本一直渲染不出来相关推荐

Vue的常用指令(v-html {{}}文本插值,v-bind绑定属性,v-if条件渲染,v-for列表渲染,v-on @ 事件绑定,v-model表单绑定)
Vue的常用指令(文本插值,绑定属性,条件渲染,列表渲染,事件绑定,表单绑定) Vue 的介绍 Vue 是一套构建用户界面的渐进式前端框架. 只关注视图层,并且非常容易学习,还可以很方便的与其它库或已 ...
Matplotlib 中文用户指南 4.7 使用 LaTeX 渲染文本
使用 LaTeX 渲染文本原文:Text rendering With LaTeX 译者:飞龙协议:CC BY-NC-SA 4.0 Matplotlib 可以选择使用 LaTeX 来管理所有文本布 ...
Manim文档及源码笔记-CE文档-主题化指南3渲染文本和公式
Rendering Text and Formulas 渲染文本和公式有两种不同的方式可以在视频中渲染文本: 1.使用Pango(text_mobject) 2.使用乳胶(tex_mobject) ...
Android OpenGL ES 渲染文本
1 前言先来个灵魂拷问:为什么要研究OpenGL渲染文本? 用Android的canvas,不是更香吗?! 这就看应用场景了,一个纯粹的UI界面,确实不需要用到OpenGL,但是,复杂一些的,例如弹 ...
打造Flutter高性能富文本编辑器——渲染篇
本系列文章主要介绍Flutter富文本编辑的设计和实现,从协议层.渲染层.自定义扩展以及体验优化等方面,详细介绍如何实现一个功能完善.可扩展.高性能的Flutter富文本编辑器,以及闲鱼在实践过程中遇 ...
vue隐藏浏览器_一分钟学会Vue的条件渲染和列表渲染
介绍之前一段时间由于工作很忙,没有时间继续学习Vue,今天算是继续对之前的学习进行补充了,今天要学习的便是Vue的条件渲染和列表渲染,我们将讨论if.if-else.if-else-if,show等 ...
浏览器从输入URL到页面渲染过程 ——页面渲染流程
之前我有总结过一篇经典面试题:浏览器从输入URL到页面渲染过程 ,接下里我将对某些知识点进行更细致的解析. 浏览器从输入URL到页面渲染过程系列文章: (一):浏览器从输入URL到页面渲染过程 -- ...
SSR 学习 - 传统服务端渲染 Web 应用、客户端渲染、同构渲染、优缺点和案例演示
概述随着前端技术栈和工具链的迭代成熟,前端工程化.模块化也已成为了当下的主流技术方案. 在这波前端技术浪潮中,涌现了诸如 React.Vue.Angular 等基于客户端渲染的前端框架. 这类框架所 ...
客户端渲染服务端渲染_这就是赢得客户端渲染的原因
客户端渲染服务端渲染 A decade ago, nearly everyone was rendering their web applications on the server using t ...

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

mustache 渲染文本一直渲染不出来相关推荐

最新文章

热门文章