在 PugJS 的日历事件列表中为每个月添加一个 HTML 元素

Question

我正在 PugJS 中构建一个“事件列表”，我正在经历每个事件，我想为每个月添加一个 html 元素，如下所示：<div data-month="October">。列出该月的活动后，我必须关闭那个 </div> 并为下个月开始一个新的活动。

在后端，我只有一个 title 字段和一个 date 字段用于每个事件。我想做到这一点而不必添加额外的字段，select 又是一个“月”，如果 selected 的月份与 [=15] 不同，这可能会带来错误=] 字段（能够列出事件，如果有意义的话）？

目前，我在这一步：

each event in calendar_events
  - var str = event.primary.event_date // 2021-10-22
  - var separator = '-';
  - var month = str.split(separator, 2).pop(); // 10

  while (month === '10')
    - month = 'October'

    //- I need to add here a <div data-month="October">

    h2=event.primary.event_title[0].text
    p=event.primary.event_date

    //- After showing all the items,
    //- I need to close that </div>

  while (month === '11')

    - month = 'November'
    //- I need to add here a <div data-month="November">

    h2=event.primary.event_title[0].text
    p=event.primary.event_date

    //- After showing all the items,
    //- I need to close that </div>

问题是我在 10 月份得到了每个条目的重复 <div data-month="October">，因为我必须在第一行开始迭代：each event in calendar_events.

我将把这个 CodePen link 和 html 版本留在这里，因为我认为你们可以理解我的问题的主要思想：https://codepen.io/ositaka/pen/abwjrPe

Answer 1

如果数据已经按日期排序，尝试：

- 
  const calendar_events = [{ pr: { ed: "2021-10-22", et: [ { text: "xx"} ]}},
   { pr: { ed: "2021-10-23", et: [ { text: "yy"} ]}},
   { pr: { ed: "2021-12-25", et: [ { text: "Xmas"} ]}},
   { pr: { ed: "2022-01-01", et: [ { text: "New Year's Day"} ]}} ];
  const getYear = event => event.pr.ed.split("-")[0];
  const getMonth = event => Number(event.pr.ed.split("-", 2).pop());
  const getDay = event => event.pr.ed.split("-")[2];
  const months = ['dummy','jan','feb','mar','apr','may','jun','jul','aug','sep','oct','nov','dec'];

  let current = { year: getYear(calendar_events[0]), month: 0 };
  const incCurrent = () => { 
    if (current.month==12) {
      current.month = 1; current.year++;
    } else current.month++;
  }
- for (let i=0; i<calendar_events.length; i++) {
-   let month = getMonth(calendar_events[i]);
-   if (current.month != month) {
-     while (current.month != month) incCurrent();
  h3 New Month #{months[month]}-#{getYear(calendar_events[i])}
  .events__group(data-month=months[month])
    p #{getDay(calendar_events[i])} - #{calendar_events[i].pr.et[0].text}
    while i<calendar_events.length-1 && getMonth(calendar_events[i+1])==current.month
      - i++;
      p #{getDay(calendar_events[i])} - #{calendar_events[i].pr.et[0].text}
-   }
- }

输出：

<h3>New Month oct-2021</h3>
<div class="events__group" data-month="oct">
  <p>22 - xx</p>
  <p>23 - yy</p>
</div>
<h3>New Month dec-2021</h3>
<div class="events__group" data-month="dec">
  <p>25 - Xmas</p>
</div>
<h3>New Month jan-2022</h3>
<div class="events__group" data-month="jan">
  <p>01 - New Year's Day</p>
</div>

哈巴狗代码注意事项：

我硬编码了一些测试数据
我添加了一个辅助函数 getMonth 来减少提取深埋在数据对象中的月份值的冗长程度
真实 Javascript（以 - 开头的行或块）对缩进不是很敏感，而哈巴狗的伪 Javascript 对缩进敏感。
数据必须有效以避免无休止的while循环。示例 2021-13-01 会给你带来麻烦。

在 PugJS 的日历事件列表中为每个月添加一个 HTML 元素

Adding an HTML element for each month on a Calendar Events' list in PugJS

pug