我应该如何使用 if else 和 for 循环与 .hbs 文件 (Handlebars.js)？

Question

我知道如何使用 if else 语句或使用 .ejs 文件进行循环，但我需要更改 .hbs 文件中的代码，我是新手 this.Please 帮助我完成以下示例使用过的 .ejs 文件我需要将其转换为 .hbs 文件但不知道如何更改 if else 和 for loop

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Fetch using MySQL and Node.js</title>
</head>
<body>
    <div class="table-data">
<h2>Display Data using Node.js & MySQL</h2>
    <table border="1">
        <tr>
            <th>S.N</th>
            <th>Full Name</th>
            <th>Email Address</th>
            <th>City</th>
            <th>Country</th>
            <th>Edit</th>
            <th>Delete</th>
        </tr>
        
        <%
        if(userData.length!=0){
        var i=1;
        userData.forEach(function(data){
        %>
        <tr>
            <td><%=i; %></td>
            <td><%=data.fullName %></td>
            <td><%=data.emailAddress %></td>
            <td><%=data.city %></td>
            <td><%=data.country %></td>
            <td><a href="/users/edit/<%=data.id%>">Edit</a></td>
            <td><a href="/users/delete/<%=data.id%>">Delete</a></td>
        </tr>
        <%  i++; }) %>
        <% } else{ %>
            <tr>
                <td colspan="7">No Data Found</td>
            </tr>
        <% } %>
    </table>
    </div>
</body>
</html>

我使用了下面的代码，但它不起作用，因为我是新手，我需要你的指导

@76484 i have used this ``` {{#if userData.length != 0 }}
{{var i =1;}}
{{userData.forEach(function(data))}}
<tr>
            <td>{{=i;}}</td>
            <td>{{= data.fullName}}</td>
            <td>{{= data.emailAddress}}</td>
            <td>{{= data.city}}</td>
            <td>{{= data.country}}</td>
            <td>{{= data.Dimension_4_Score}}</td>
            <td>{{= data.Total_Score_Persentage}}</td>
            
        </tr>
        {{i++; })}}  
       {{else{} }  
            <tr>
                <td colspan="7">No Data Found</td>
            </tr>
        {{}}}  
        </table>
        </div>
      </body> ``` but it is not working

Answer 1

您的嵌入式 JS 示例与 Handlebars 之间的主要区别在于 Handlebars 不会执行任意 JavaScript，就像您的 .forEach 循环一样。相反，Handlebars 提供 helpers 以允许您执行条件和迭代等操作。

首先，我们将解决您的情况，if (userData.length != 0)。 Handlebars 有一个 #if helper，我们可以用它来检查 userData 是否为真值（大于 0）length。结果将是：

{{#if userData.length}}
    {{! TODO: output each user data}}
{{else}}
    <tr>
        <td colspan="7">No Data Found</td>
    </tr>
{{/if}}

其次，Handlebars 有一个 #each helper 用于循环集合，就像您使用 userData.forEach(function(data) { /*...*/ } 代码一样。出于您的目的，语法为：

{{#each userData}}
    <tr>
        <td>{{ @index }}</td>
        <td>{{ fullName }}</td>
        <td>{{ emailAddress }}</td>
        <td>{{ city }}</td>
        <td>{{ country }}</td>
        <td><a href="/users/edit/{{ id }}">Edit</a></td>
        <td><a href="/users/delete/{{ id }}">Delete</a></td>
    </tr>
{{/each}}

请注意我们如何计算 userData 数组中每个对象的属性。没有=。我们只是将属性名称包裹在双把手中，例如 {{ fullName }}。 Handlebars 处理 #each 中的执行上下文，因此我们始终引用数组的当前迭代。

另请注意 {{ @index }}。这是一个由 Handlebars 提供的 special variable 来为我们提供 #each 循环中的当前迭代索引。它是零索引，因此我们的输出将与您的 ejs 示例略有不同，因为您将计数器初始化为 1。

不幸的是，如果我们希望我们的索引是基于一个的，我们将不得不为此写一个custom helper。我们的助手只需要取一个数字 @index 并将其递增 1。它看起来像：

Handlebars.registerHelper('increment', function (num) {
    return num + 1;
});

我们将更新我们的模板以使用它：

{{increment @index }}

我用最后一个例子创建了一个fiddle供你参考。

我应该如何使用 if else 和 for 循环与 .hbs 文件 (Handlebars.js)？

How should i use if else and for loop with .hbs file (Handlebars.js)?

ejs

handlebars.js