jinja loop variable and htmx
━━━━━━━━━━━━━━━━━━━━━━━━━━━━

jinja has a loop variable that is very handy to use with htmx. Whether you want to implement a click to load more or an infinite scroll this loop variable is...

Date: April 6, 2024

jinja has a loop variable that is very handy to use with htmx </htmx/>. Whether you want to implement a click to load more or an infinite scroll this loop variable is very handy.

```
{% for person in persons %}
<li
{% if loop.last %}
    hx-get="{{ url_for('infinite', page=next_page) }}"
    hx-trigger="intersect once"
    hx-target="#persons"
    hx-swap='beforeend'
    hx-indicator="#persons-loading"
{% endif %}
    {{ person.name.upper() }} -
    {{ person.phone_number }}
</li>
{% endfor %}
```

Now for every chunk of contacts that we load we will trigger the infinite scroll by loading more once the last one has intersected the screen.