Question

我有一个由full_slug排序的注释数组的线程视图。

[ { datetime: 2019-06-13T14:16:30.208Z,
    _id: 5d025ad5cdf5d838f07159f7,
    content: 'A comment',
    article: 5d001d7fc8ecd70017697fc6,
    user: 5d022fe6aa639ad56914cdfd,
     slug: '85bqu',
     full_slug: '2019.06.13.03.16.30:85bqu',
     __v: 0 },
   { datetime: 2019-06-13T14:47:44.964Z,
     _id: 5d02631fb6d4df083047cd3e,
     content: 'First child of above comment',
     article: 5d001d7fc8ecd70017697fc6,
     user: 5d022fe6aa639ad56914cdfd,
     parent: 5d025ad5cdf5d838f07159f7,
     slug: '85bqu/1qs4a',
     full_slug: '2019.06.13.03.16.30:85bqu/2019.06.13.03.47.44:1qs4a',
     __v: 0 },
   { datetime: 2019-06-13T14:47:44.964Z,
     _id: 5d026340b6d4df083047cd3f,
     content: 'Child of child',
     article: 5d001d7fc8ecd70017697fc6,
     user: 5d022fe6aa639ad56914cdfd,
     parent: 5d02631fb6d4df083047cd3e,
     slug: '85bqu/1qs4a/lf3fh',
     full_slug: '2019.06.13.03.16.30:85bqu/2019.06.13.03.47.44:1qs4a/2019.06.13.03.47.44:lf3fh',
     __v: 0 },
   { datetime: 2019-06-13T14:19:50.699Z,
     _id: 5d025b9a971a81396cc57faf,
     content: 'Another root comment',
     article: 5d001d7fc8ecd70017697fc6,
     user: 5d022fe6aa639ad56914cdfd,
     slug: '7xky7',
     full_slug: '2019.06.13.03.19.50:7xky7',
     __v: 0 }]

请注意，由于按full_slug排序（对分层和按时间顺序排列的信息进行编码），因此注释的顺序与您向下滚动注释线程时看到的顺序相同。

我的问题是，如何将这样的数组呈现到嵌套的HTML列表中？

感谢您的帮助，

杰克

Answer 1

假设注释顺序正确，并且数组存储在名为comments的变量中，则可以执行以下操作：

创建一个mixin来呈现评论。在mixin中，循环访问comments数组以查看是否有任何注释具有与当前注释的parent匹配的id属性。如果是这样，请使用mixin渲染它们。

mixin comment(obj)
  li(id=obj.id)
    blockquote
      p= obj.content
      footer — user #{obj.user}
    ol
      - let parentId = obj._id;
      each comment in comments
        - if (parentId === comment.parent)
          +comment(comment)

遍历comments数组并呈现任何根注释（没有parent属性的根注释）以启动递归过程。

section
  h2 Comments
  ol
    each comment in comments
      - if (!comment.parent)
        +comment(comment)

这将以嵌套方式呈现注释，如下所示：

ol {
  list-style: none;
  padding-left: 0;
}
ol:empty {
  display: none;
}
blockquote {
  margin-left: 0;
}
p {
  margin-bottom: 0;
}
li li {
  padding-left: 1em;
}

<section>
  <h2>Comments</h2>
  <ol>
    <li>
      <blockquote>
        <p>A comment</p>
        <footer>— user 5d022fe6aa639ad56914cdfd</footer>
      </blockquote>
      <ol>
        <li>
          <blockquote>
            <p>First child of above comment</p>
            <footer>— user 5d022fe6aa639ad56914cdfd</footer>
          </blockquote>
          <ol>
            <li>
              <blockquote>
                <p>Child of child</p>
                <footer>— user 5d022fe6aa639ad56914cdfd</footer>
              </blockquote>
              <ol>
              </ol>
            </li>
          </ol>
        </li>
      </ol>
    </li>
    <li>
      <blockquote>
        <p>Another root comment</p>
        <footer>— user 5d022fe6aa639ad56914cdfd</footer>
      </blockquote>
      <ol>
      </ol>
    </li>
  </ol>
</section>

请注意，这将在没有子项的注释中创建空的ol元素，因此请确保使用:empty CSS选择器为用户提供足够的隐藏性。

如何将线程注释数组呈现为html？

1 个答案: