Nodejs ejs递归函数的问题

Nodejs ejs递归函数的问题

ejs中可以声明递归函数吗？代码如下，createTree是一个递归函数。

<% function createTree(ret){ %>
      <% if(ret.comments){ %>
        <% var i = -1, len = ret.comments.length %>
        <% while(++i < len){ %>
          <% if(ret.comments[i].comments) { %>
          <% console.log(ret.comments[i]); %>
          <div class="media" id="<%= ret.comments[i]._id %>">
            <a class="pull-left">
              <img class="media-object" src="<%= ret.comments[i].gravatar %>">
            </a>
            <div class="media-body">
              <h4 class="media-heading text-muted "><a href="<%= ret.comments[i].site %>" rel="nofollow"><%= ret.comments[i].name %></a>于<%= ret.comments[i].create_time %>说道:</h4>
              <div class="comment"><%= ret.comments[i].comment %></div>
              <% createTree(ret.comments[i]); %>
            </div>
            <div class="btn btn-info btn-xs reply">回复</div>
          </div>
          <% }　else { %>
          <% console.log(ret.comments[i]); %>
          <div class="media" id="<%= ret.comments[i]._id %>">
            <a class="pull-left">
              <img class="media-object" src="<%= ret.comments[i].gravatar %>">
            </a>
            <div class="media-body">
              <h4 class="media-heading text-muted "><a href="<%= ret.comments[i].site %>" rel="nofollow"><%= ret.comments[i].name %></a>于<%= ret.comments[i].create_time %>说道:</h4>
              <div class="comment"><%= ret.comments[i].comment %></div>
            </div>
            <div class="btn btn-info btn-xs reply">回复</div>
          </div>
          <% } %>
        <% } %>
      <% } %>
    <% } %>

7 回复

在EJS模板引擎中，确实可以使用递归函数来处理嵌套的数据结构。在您的例子中，createTree 函数被用来渲染一个评论列表，其中每个评论可能包含子评论（即嵌套的评论）。以下是对您提供的代码进行解释，并提供一个简化版本的代码。

解释

  1. 定义递归函数：

    <% function createTree(ret){ %>
  ...
<% } %>

    在EJS中，你可以像在JavaScript中一样定义函数。这里定义了一个名为 createTree 的函数，它接受一个参数 ret，这个参数通常是一个包含评论数据的对象。

  2. 检查是否有子评论：

    <% if(ret.comments){ %>
  ...
<% } %>

    这里检查 ret 对象是否包含 comments 属性，以确定是否需要渲染子评论。

  3. 遍历评论数组：

    <% var i = -1, len = ret.comments.length %>
<% while(++i < len){ %>
  ...
<% } %>

    使用 while 循环遍历 ret.comments 数组中的每个评论。

  4. 递归调用：

    <% createTree(ret.comments[i]); %>

    如果当前评论有子评论，递归调用 createTree 函数来渲染这些子评论。

示例代码

下面是简化后的完整代码：

<% function createTree(ret) { %>
  <% if (ret.comments && ret.comments.length > 0) { %>
    <% ret.comments.forEach(function(comment) { %>
      <div class="media" id="<%= comment._id %>">
        <a class="pull-left">
          <img class="media-object" src="<%= comment.gravatar %>">
        </a>
        <div class="media-body">
          <h4 class="media-heading text-muted">
            <a href="<%= comment.site %>" rel="nofollow"><%= comment.name %></a>于<%= comment.create_time %>说道:
          </h4>
          <div class="comment"><%= comment.comment %></div>
          <% createTree(comment); %>
        </div>
        <div class="btn btn-info btn-xs reply">回复</div>
      </div>
    <% }); %>
  <% } else { %>
    <div class="media" id="<%= ret._id %>">
      <a class="pull-left">
        <img class="media-object" src="<%= ret.gravatar %>">
      </a>
      <div class="media-body">
        <h4 class="media-heading text-muted">
          <a href="<%= ret.site %>" rel="nofollow"><%= ret.name %></a>于<%= ret.create_time %>说道:
        </h4>
        <div class="comment"><%= ret.comment %></div>
      </div>
      <div class="btn btn-info btn-xs reply">回复</div>
    </div>
  <% } %>
<% } %>

<% createTree(data); %>

注意事项

  • 确保 data 是一个包含评论数据的对象。
  • 递归函数 createTree 会一直递归到没有子评论为止。
  • 每个评论对象应该至少包含 _id, gravatar, name, site, create_time, 和 comment 等属性。

通过这种方式，您可以有效地使用EJS模板引擎中的递归函数来渲染复杂的嵌套数据结构。


高手们，求解答，ejs里可以放递归函数吗？

看着有点头大，本来是要逻辑、数据、展示分离的，这下好了，更乱了。

不建议啊… 每行放一个 <% … %> 多蛋疼

我想构建一个评论的树形结构，该怎么做呢？

<div><script type=“text/javascript”> alert(‘aaa’); </script></div>

在EJS模板中，你可以使用递归函数来处理嵌套的数据结构。你的代码已经展示了如何实现一个简单的递归函数createTree来渲染评论列表。不过，EJS模板本身不支持直接定义递归函数，因为这些模板是在运行时解析的。

在你的例子中，createTree 函数被用来递归地遍历评论，并且在每个评论节点上再次调用自身以处理其子评论。这是通过检查ret.comments[i].comments是否存在来实现的。

示例代码

<% function createTree(ret) { %>
  <% if (ret.comments) { %>
    <% var i = -1, len = ret.comments.length %>
    <% while (++i < len) { %>
      <div class="media" id="<%= ret.comments[i]._id %>">
        <a class="pull-left">
          <img class="media-object" src="<%= ret.comments[i].gravatar %>">
        </a>
        <div class="media-body">
          <h4 class="media-heading text-muted ">
            <a href="<%= ret.comments[i].site %>" rel="nofollow">
              <%= ret.comments[i].name %>
            </a>
            于 <%= ret.comments[i].create_time %> 说道:
          </h4>
          <div class="comment"><%= ret.comments[i].comment %></div>
          <% if (ret.comments[i].comments) { %>
            <!-- 递归调用 -->
            <%= createTree(ret.comments[i]) %>
          <% } %>
        </div>
        <div class="btn btn-info btn-xs reply">回复</div>
      </div>
    <% } %>
  <% } %>
<% } %>

<% createTree(data) %>

解释

  • 递归调用：在每次迭代中，如果当前评论有子评论（ret.comments[i].comments），则会递归调用createTree。
  • 循环遍历：使用 while 循环遍历当前层的所有评论。
  • 条件判断：使用条件语句判断是否应该渲染子评论。

这样，你就可以通过递归的方式处理具有任意深度的评论树了。注意，确保数据结构正确，以便递归能够正常工作。

回到顶部