Как кратко представить if / else для определения классов CSS в шаблонах Django - PullRequest
6 голосов
/ 07 апреля 2011

В шаблоне Django я хотел бы добавить классы CSS в DIV на основе определенных «условий», например:

<div class="pkg-buildinfo 
            {% if v.release.version == pkg.b.release.version %}active{% else %}inactive{% endif %} 
            {% if v.release.version == project.latest.version %}latest{% else %}notlatest{% endif %}">

( note that vпеременная цикла; все это внутри цикла for)

Выше добавлены классы CSS "активный" или "неактивный" и "последний" или "notlatest" на основе двух условий.

Это, однако, трудно читать и многословно.Я обнаружил, что оператор with не поддерживает присвоение значения выражений / условий (в отличие от сложных переменных), что очень жаль.Есть ли лучший способ сделать это?

Ответы [ 3 ]

5 голосов
/ 07 апреля 2011

Вместо этого вы можете поместить эту логику в свое представление и создать атрибуты для объекта, которые являются «активными» или «неактивными» и т. Д. Тогда вам нужно только получить доступ к атрибутам в шаблоне.

3 голосов
/ 07 апреля 2011

Пользовательский фильтр может быть хорошей альтернативой.

@register.filter
def active_class(obj, pkg):
    if obj.release.version == pkg.b.release.version:
         return 'active'
    else:
        return 'inactive'

и используйте его в своем шаблоне:

<div class="pkg-buildinfo {{ obj|active_class:pkg }}" 
3 голосов
/ 07 апреля 2011

Вы можете немного сократить его с помощью оператора with:

{% with v.release.version as version %}
<div class="pkg-buildinfo 
            {% if version == pkg.b.release.version %}active{% else %}inactive{% endif %} 
            {% if version == project.latest.version %}latest{% else %}notlatest{% endif %}">
{% endwith %}

Но, безусловно, было бы лучше поместить эту логику в представление:

context_data = {
    'class_active': v.release.version == pkg.b.release.version and "active" or "inactive",
    'class_latest': v.release.version == project.latest.version and "latest" or "notlatest",
    ... }

и в шаблоне:

<div class="pkg-buildinfo {{ class_active }} {{ class_latest }}"
...