使用alpine JS/11ty/nunchucks只显示两个日期项

Question

我在json文件中有一系列日期事件。我只想显示相对于今天的日期发生得最快的两个事件。我使用11ty和双节棍，并有以下代码:

<div class="flex-auto lg:w-1/3" x-data="{ currentDate: new Date().toISOString().slice(0, 10) }">
<h3>Our Next Events</p>
{% for item in events.items %}
{% if loop.index0 < 2 %}
<h4 class="mb-6">{{ item.date | asPostDate  }}<br>{{ item.description | safe }}</h4>
{% endif %}
{% endfor %}
<p class="text-lg"><a class="rounded-sm p-2 bg-yellow-800 px-4 cursor-pointer hover:font-normal px-10 text-md hover:bg-yellow-700 no-underline font-sans text-white" href="/events/#special">see all events</a></p>
</div>

这将事件的数量限制为两个。

然而，如果我添加一个基于当前日期的x-show，比如<div x-show="currentDate <= '{{ item.date }}'">，它隐藏了已经在循环中加载的项目，因此，例如，我现在有两个项目正在加载，但其中一个是在今天的日期之前，所以它只显示一个项目。

加载列表，评估日期，然后将列表限制为两个最快到来的项目的正确方法是什么?

Answer 1

您需要一个辅助的Alpine.js数组变量来跟踪显示事件的数量。在每个元素上使用x-init指令，如果事件数量不超过最大值，我们可以将当前事件的日期添加到该数组中。然后在x-show条件下，我们检查日期是否包含在数组中。这里有一个小例子:

<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<div x-data="{ maxCount: 2,
events: [],
//currentDate: new Date().toISOString().slice(0, 10),
currentDate: '2023-04-11', // Use static date for the example
addEvent(date) {
if (this.currentDate <= date && this.events.length < this.maxCount) {
this.events.push(date)
}
}}">

<h3>First two event dates from 2023-04-11</h3>
<div x-init="addEvent('2023-04-10')" x-show="events.includes('2023-04-10')">2023-04-10</div>
<div x-init="addEvent('2023-04-11')" x-show="events.includes('2023-04-11')">2023-04-11</div>
<div x-init="addEvent('2023-04-12')" x-show="events.includes('2023-04-12')">2023-04-12</div>
<div x-init="addEvent('2023-04-13')" x-show="events.includes('2023-04-13')">2023-04-13</div>
<div x-init="addEvent('2023-04-14')" x-show="events.includes('2023-04-14')">2023-04-14</div>
</div>

和nunjucks模板:

<div class="flex-auto lg:w-1/3" x-data="{ 
maxCount: 2,
events: [],
currentDate: new Date().toISOString().slice(0, 10),
addEvent(date) {
if (this.currentDate <= date && this.events.length < this.maxCount) {
this.events.push(date)
}
}}">
<h3>Our Next Events</p>
{% for item in events.items %}
<h4 class="mb-6" 
x-init="addEvent('{{ item.date }}')"
x-show="events.includes('{{ item.date }}')">
{{ item.date | asPostDate  }}<br>{{ item.description | safe }}
</h4>
{% endfor %}
</div>