Как вывести массив резьбовых комментариев в HTML? - PullRequest
Новая
       13

Как вывести массив резьбовых комментариев в HTML?

0 голосов
/ 13 июня 2019

У меня есть многопоточное представление массива комментариев, упорядоченного по 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?

Спасибо за любую помощь,

Jack

1 Ответ

0 голосов
/ 15 июня 2019

Предполагая, что комментарии в правильном порядке, и ваш массив хранится в переменной с именем comments, вы можете сделать следующее:

  1. Создать миксин для визуализации комментариев.Внутри 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)

  2. Выполните цикл по массиву comments и визуализируйте все корневые комментарии (без свойства parent), чтобы запустить рекурсию.process. 

    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 элементы в комментариях без дочерних элементов, поэтому обязательно адекватно скрывайте их от пользователей, используя селектор CSS :emptyдля доступности.

...