如何简洁地在Django模板中使用if/else指定CSS类

Question

在Django模板中，我想根据一些“条件”给一个DIV添加CSS类，比如：

<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 %}">

(注意，这里的v是一个循环变量；整个内容是在一个for循环里面)

上面的代码根据两个条件添加了CSS类“active”或“inactive”，以及“latest”或“notlatest”。

不过，这样写起来有点难读，而且内容也比较冗长。我发现with语句不支持给表达式/条件赋值（而不是复杂变量），这让人有点失望。有没有更好的方法来实现这个呢？

Answer 1

你可以通过使用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 }}"

Answer 2

自定义过滤器可能是一个不错的选择。

@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 }}" 

Answer 3

你可以把这个逻辑放到你的视图里，然后在对象上创建一些属性，比如“激活”或者“未激活”等等。这样的话，你只需要在模板中访问这些属性就可以了。