天天看點

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();
  }      

其實上面是整個渲染的一個過程,從背景傳回資料,然後渲染到頁面上

但是在做這個過程中出現一個問題,背景資料傳回也是正常的,但是無論如何頁面上也是現實不出來的

打斷點調試:

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

 上面這個地方一直為空字元串,原因在哪裡,M.render(articleTemp,data) 這種情況之下一直是一個空字元串