How can I convert a nested EJS foreach loop to HBS foreach loop?-CodePudding

I was using EJS on my project but I had to change it to HBS for a reason. So I'm trying to translate my ejs code to hbs. However, the syntax of hbs really confuses me. This is my ejs code: (Sorry, the variables are not English. I hope you understand my code.)

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


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


  <div id="reg-modal<%= proje.id %>"  tabindex="-1">
    <div >
      <div >
        <div >
          <h5 >
            <%= proje.proje_ismi %>
          </h5>
          <button type="button"  data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div >


          <div >

            <h4 >Proje Detayları</h4>

            <table >
              <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  src="../images/randomForLibrary/<%= proje.proje_resmi_url %>">

            <p >

              <%= proje.proje_aciklaması%>


            </p>

            <div >

              <h3>Proje Dosyaları</h3>


              <a href="./user_files/<%= proje.proje_dosyalari_url %>" download>

                Projeye ait dosyaları indirin
                <!-- <input type="button"  value="Download"> -->
              </a>

            </div>


          </div>

I need the version of HBS of my code. I can't convert it using #each syntax. Thanks for your help.

CodePudding user response：

The two .forEach loops that wrap your template are suspicious to me and force me to assume that projeler is an array of arrays. With this assumption, there isn't much more that is required to convert your template to Handlebars than replacing the .forEach loops with #each loops and, of course, changing the ejs tags to mustaches {{ }}.

Your converted template would look something like:

{{#each projeler as |proje_dizisi|}}
  {{#each proje_dizisi as |proje|}}
    <div id="reg-modal{{proje.id}}"  tabindex="-1">
      <div >
        <div >
          <div >
            <h5 >{{proje.proje_ismi}}</h5>
            <button type="button"  data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div >
            <div >
              <h4 >Proje Detayları</h4>
              <table >
                  <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  src="../images/randomForLibrary/<%= proje.proje_resmi_url %>">
              <p >{{proje.proje_aciklaması}}</p>
              <div >
                <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}}

I have created a fiddle for reference.