What's the best way to handle valueless attributes in Django templates?

I'm looking for a cleaner way to conditionally add valueless HTML attributes, like disabled, in a Django template.

For example, in the code snippet below, the {% if %} tag is embedded directly inside the <button> tag, which I find makes the code harder to read.

<button type="submit"
    id="prev-page-btn"
    class="btn btn-secondary w-50"
    name="prev-page-btn"
    {% if not page_obj.has_previous %}disabled{% endif %}>
   Previous
</button>

Is there a more elegant solution for this? I'd like to avoid duplicating the entire <button> block just to control the presence of the disabled attribute.

Instead of putting the {% if %} logic directly in the tag, assign it to a context variable or use the {% with %} tag.

Like:

{% with 'disabled' if not page_obj.has_previous else '' as disabled_attr %}
<button type="submit"
    id="prev-page-btn"
    class="btn btn-secondary w-50"
    name="prev-page-btn"
    {{ disabled_attr }}>
   Previous
</button>
{% endwith %}

What might help here is a custom template tag [Django-doc], like:

# some_app/templatetags/htmlattr.py

from django.forms.utils import flatattr

from django import template

register = template.Library()


@register.simple_tag(name='html_attributes')
def html_attributes(**kwargs):
    return flatatt(kwargs)

then we can load this template tag in the template, and use it accordingly:

{% load htmlattr %}

{% with not page_obj.has_previous as no_previous %}

<button type="submit"
    id="prev-page-btn"
    class="btn btn-secondary w-50"
    name="prev-page-btn"
    {% html_attributes disabled=no_previous %}>
   Previous
</button>
{% endwith %}

Our html_attributes allows to work with key-values. If the value is False or None, it will not be included. If the value is a non-boolean, it will be passed as the value of the HTML attribute, so:

<tag {% html_attributes foo='bar' qux=False bla=True %}>

will be encoded in HTML as:

<tag foo="bar" bla>

We thus can replace the above with:

{% with not page_obj.has_previous as no_previous %}

<button {% html_attributes type='submit' id='prev-page-btn' class='btn btn-secondary w-50' name='prev-page-btn' disabled=no_previous %}>
   Previous
</button>
{% endwith %}

Django uses this the flatatt internally to format HTML attributes for wigets of a form.

You’ll need to move the logic outside the {% with %} and use a traditional {% if %}block to set the value:

{% if not page_obj.has_previous %}
  {% with 'disabled' as disabled_attr %}
{% else %}
  {% with '' as disabled_attr %}
{% endif %}
<button type="submit"
    id="prev-page-btn"
    class="btn btn-secondary w-50"
    name="prev-page-btn"
    {{ disabled_attr }}>
   Previous
</button>
{% endwith %}

This works with all supported Django versions.

Вернуться на верх