使用Mustache.js创建表

时间:2014-01-14 06:21:39

标签: javascript jquery mustache

使用Mushtache.js创建表时遇到问题

查看文件:

<table class="table table-bordered table-hover table-striped tablesorter">
    <thead>
        <tr>
            <th class="header">Name</th>
            <th class="header">Email ID</th>
            <th class="header">Contact Number</th>
            <th class="header">Edit</th>
        </tr>
    </thead>
    <tbody>
    <div id="eTableList"></div>    
    <script id="eList" type="text/template">     
            <tr>
                <td>{{name}}</td>
                <td>{{email}}</td>
                <td>{{contact_number}}</td>
                <td><a href="{{id}}">View/Edit</a></td>
            </tr>
     </script>    
    </tbody>
</table>

JS代码:

  function createTable(jsonEData){    
      var template = $("#eList").html();
      expList = Mustache.render(template, jsonEData); 
      $("#expertTableList").html(expList);
  }

我将此方法称为

   <script language="javascript">
        $(document).ready(function(){
            createTable(<?php echo $this->eList;?>);
        })
    </script>

和$ this-&gt; eList = jsonEData的值是

  [
    {
        "id": "52d3d523bdde226f17a581ba",
        "name": "shgajsah",
        "email": "0",
        "contact_number": 2147483647
    },
    {
        "id": "52d3d5c8bdde22c817a581ba",
        "name": "fffsdf",
        "email": "asa@ddjdj.com",
        "contact_number": 323323232
    }
]

我没有收到任何错误,但是没有使用上面的代码填充表格。那么请告诉我我做错了什么?

1 个答案:

答案 0 :(得分:1)

你没有迭代你的物品,试一试:

{{#.}}
   <tr>
      <td>{{name}}</td>
      <td>{{email}}</td>
      <td>{{contact_number}}</td>
      <td><a href="{{id}}">View/Edit</a></td>
   </tr>
{{/.}}

或者也许:

{{#each .}}
   <tr> ... </tr>
{{/each .}}