Question

我有以下内容：

handlebardemo.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="ISO-8859-1" name="viewport" content="width=device-width, initial-scale=1">
    <title>Handlebar demo - user table</title>
    <script src="lib/jquery-2.1.4.js" type="text/javascript"></script>
    <script src="lib/jquery-ui.js" type="text/javascript"></script>
    <script src="lib/handlebars-v4.0.4.js" type="text/javascript"></script>
    <script src="js/handlebar2.js" type="text/javascript"></script>
    <link rel="stylesheet" href="css/w3.css">
    <link rel="stylesheet" href="css/jquery-ui.css">
</head>
<body>
    <div id="usertable" class="w3-table-all">
        <script id="user-table-template" type="x-handlebars-template">
            <table>
                <thead>
                    <th>Username</th>
                    <th>Real Name</th>  
                    <th>Email</th>
                    <th>Group</th>
                </thead>
                <tbody>
                    {{#users}}
                        <tr>
                            <td>{{username}}</td>
                            <td>{{firstname}} {{lastname}}</td>
                            <td>{{email}}</td>
                            <td>{{group.groupname}}</td>
                        </tr>
                    {{/users}}
                </tbody>
            </table>
        </script>
    </div>
</body>
</html>

handlebar2.js

$(function(){
    var source = $("#user-table-template").html();
    var template = Handlebars.compile(source);
    var data = { users: [
          {username: "Alan87", firstname: "Alan", lastname:"Johnson", email:"alan@test.com"},
          {username: "JeffABC", firstname: "Jeff", lastname:"Beck", email:"jeff@test.com"},
          {username: "Sarah_R_1990", firstname: "Sarah", lastname:"Reilly", email:"sarah@test.com"}
          ], group: [
          {groupname:"Dev"},
          {groupname:"QA"},
          {groupname:"Dir"},
       ]}
    $("#usertable").append(template(data));
});

数据中的第一个数组，用户，打印出很好的表格，但我似乎无法将组中的值打印到第4列。我对Handlebars语法等没有最好的把握，但是我可能会遗漏一些明显的东西。我尝试<td>{{../group.groupname}}</td>，但似乎没有做任何事情，上面文件中概述的方法也没有解决。我也尝试了<td>{{../group}}</td>，但是在每行的最后一列打印出[object Object]，[object Object]，[object Object]

Answer 1

怎么样：

  <td>
    {{#each ../group}}
     {{groupname}}
    {{/each}}
  </td>

Handlebar js - JSON对象中的第二个数组不会打印到表格上

1 个答案: