如何将嵌套的EJS foreach循环转换为HBS foreach循环?

Question

我在我的项目中使用EJS，但由于某种原因我不得不将其更改为HBS。我试着把ejs代码转换成hbs。然而，hbs的语法确实让我感到困惑。这是我的ejs代码:(对不起，变量不是英语。我希望你能理解我的代码。

<% projeler.forEach(proje_dizisi=> { %>

<% proje_dizisi.forEach(proje=> { %>

<div id="reg-modal<%= proje.id %>" class="modal fade" tabindex="-1">
<div class="modal-dialog modal-xl">
<div class="modal-content d-flex">
<div class="modal-header text-center">
<h5 class="modal-title w-100 display-1">
<%= proje.proje_ismi %>
</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">

<div class="project_details_wrapper">
<h4 class="text-center fs-3 mb-4">Proje Detayları</h4>
<table class="table table-dark table-striped">
<tbody>
<tr>
<th>İsim</th>
<td>
<%= proje.isim %>
</td>
</tr>
<tr>
<th>Soy İsim</th>
<td>
<%= proje.soyisim %>
</td>
<tr>
<th>Şirket</th>
<td>
<%= proje.sirket %>
</td>
</tr>

<tr>
<th>Departman</th>
<td>
<%= proje.departman %>
</td>
</tr>

<tr>
<th>Kategori</th>
<td>
<%= proje.proje_kategorisi%>
</td>
</tr>

<tr>
<th>Proje Açıklaması</th>
<td>
<%= proje.proje_aciklamasi %>
</td>
</tr>

<tr>
<th>Proje Eklenme Tarihi</th>
<td>
<%= proje.proje_eklenme_tarihi %>
</td>
</tr>

</tbody>
</table>
<img class="img-fluid" src="../images/randomForLibrary/<%= proje.proje_resmi_url %>">
<p class="mt-3">
<%= proje.proje_aciklaması%>

</p>
<div class="mt-5">
<h3>Proje Dosyaları</h3>

<a href="./user_files/<%= proje.proje_dosyalari_url %>" download>
Projeye ait dosyaları indirin
<!-- <input type="button" class="btn--green" value="Download"> -->
</a>
</div>

</div>

我需要我的代码的HBS版本。我不能使用#each语法转换它。谢谢你的帮助。

Answer 1

包装模板的两个.forEach循环对我来说很可疑，迫使我假设projeler是数组的数组。有了这个假设，除了用#each循环替换.forEach循环，当然，将ejs标签更改为小胡子{{ }}之外，将模板转换为Handlebars所需的工作并不多。

转换后的模板看起来像这样:

{{#each projeler as |proje_dizisi|}}
{{#each proje_dizisi as |proje|}}
<div id="reg-modal{{proje.id}}" class="modal fade" tabindex="-1">
<div class="modal-dialog modal-xl">
<div class="modal-content d-flex">
<div class="modal-header text-center">
<h5 class="modal-title w-100 display-1">{{proje.proje_ismi}}</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="project_details_wrapper">
<h4 class="text-center fs-3 mb-4">Proje Detayları</h4>
<table class="table table-dark table-striped">
<tbody>
<tr>
<th>İsim</th>
<td>{{proje.isim}}</td>
</tr>
<tr>
<th>Soy İsim</th>
<td>{{proje.soyisim}}</td>
</tr>
<tr>
<th>Şirket</th>
<td>{{proje.sirket}}</td>
</tr>
<tr>
<th>Departman</th>
<td>{{proje.departman}}</td>
</tr>
<tr>
<th>Kategori</th>
<td>{{proje.proje_kategorisi}}</td>
</tr>
<tr>
<th>Proje Açıklaması</th>
<td>{{proje.proje_aciklamasi}}</td>
</tr>
<tr>
<th>Proje Eklenme Tarihi</th>
<td>{{proje.proje_eklenme_tarihi}}</td>
</tr>
</tbody>
</table>
<img class="img-fluid" src="../images/randomForLibrary/<%= proje.proje_resmi_url %>">
<p class="mt-3">{{proje.proje_aciklaması}}</p>
<div class="mt-5">
<h3>Proje Dosyaları</h3>
<a href="./user_files/{{proje.proje_dosyalari_url}}" download>
Projeye ait dosyaları indirin
</a>
</div>
</div>
</div>
</div>
</div>
</div>
{{/each}}
{{/each}}

我已经创建了一个小提琴供参考。