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.

[code]
  {% 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.