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:

<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:

<% (function recursive(arr) { %>
  <% arr.forEach(function (item) { %>
    <span><%= item.text %></span>
    <% if (item.details && item.details instanceof Array) { %>
      <% recursive(item.details) %>
    <% } %>
  <% }) %>
<% })(data) %>
Author: Yakima
关于作者:楠溪江人,出生于1991年,目前坐标上海。读书时代跳过级、保过送,工作后转过行。2013年本科毕业于北药。看书、码字、敲代码、打羽毛球是我花时间的爱好。曾在某上市药企任国际药品注册岗,现在某高新企业任前端管理岗。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据