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

Handlebar js - Second array in JSON object wont print onto table

本文关键字：打印 数组 对象 第二个 Handlebarjs-JSON      更新时间：2023-09-26

我有以下内容：

车把演示.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>

车把2.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));
});

数据中的第一个数组users可以很好地打印到表中，但我似乎无法将组中的值打印到第四列。我还没有完全掌握Handlebars语法等，所以我可能在这里遗漏了一些明显的东西。我尝试了<td>{{../group.groupname}}</td>，但似乎没有任何作用，上面文件中概述的方法也没有成功。我也尝试了<td>{{../group}}</td>，但这在每行的最后一列中打印出了[object object]、[object object][object object]。

怎么样：

  <td>
    {{#each ../group}}
     {{groupname}}
    {{/each}}
  </td>
相关文章：