Skip to content

Recursion in EJS and Handlebars

Once in a frontend project using handlebars as the template, I can use code like the following code snippet to realize recursion:

default
<script id="contentTpl" type="text/x-handlebars-template">
  {{! 通过#*inline标签定义行内partials片段,供递归使用}}
  {{#*inline "lists"}}
    {{#if details.length}}
      <ul class="lists">
        {{#each details}}
          <li data-index="{{@index}}" class="list{{getOpenStatus open}}">
            <div class="item-wrapper">
              {{#if details.length}}
                <span class="icon-toggle"></span>
              {{/if}}
              <span class="icon-entity{{getEntityCat details}}">F</span>
              <span class="icon-checkbox{{getCheckStatus checked details}}"></span>
              <span class="name">{{name}}</span>
              {{> lists}}
            </div>
          </li>
        {{/each}}
      </ul>
    {{/if}}
  {{/inline}}
  <article class="trees-wrapper">
    {{> lists}}
  </article>
</script>

So, I think probably recursion effect can also be implemented in EJS template. And after some testing, the answer is yes, and a sample code snippet is as below:

default
<% (function recursive(arr) { %>
  <% arr.forEach(function (item) { %>
    <span><%= item.text %></span>
    <% if (item.details && item.details instanceof Array) { %>
      <% recursive(item.details) %>
    <% } %>
  <% }) %>
<% })(data) %>

天上的神明与星辰,人间的艺术和真纯,我们所敬畏和热爱的,莫过于此。