如何正确地将自定义元素列表传递给class属性？

Question

我的模板中有一行：

<div class="class1 class2 class3 {{ foo_classes }}">

如果foo_classes是空的，我得到class="class1 class2 class3 "。 我想要得到的是class="class1 class2 class3"，在类列表的末尾没有额外的空间。你知道吗

<div class="class1 class2 class3{{ foo_classes }}">

如果我删除了空格（看上面的那行），那么我得到class="class1 class2 class3class4 class5"，这一点也不好。你知道吗

如果foo_classes为空，如何传递额外的类以避免在classes部分的末尾获得不必要的空间？你知道吗

Answer 1

一种方法是使用^{}标记：

<div class="class1 class2 class3{% if foo_classes %} {{ foo_classes }}{% endif %}">

Answer 2

一种方法是使用^{}标记：

<div class="class1 class2 class3{% if foo_classes %} {{ foo_classes }}{% endif %}">

Answer 3

如果问题太大，请更改向模板添加类的方式，以便始终只使用变量：

<div class="{{ foo_classes }}">

因此，您总是将class1 class2 class3存储在该变量中，但有时会使用附加/额外类来切换它（例如class1 class2 class3 class4）

这是很常见的解决方案，例如虚拟用户.js在这个世界中，您倾向于在变量中存储类的动态列表，并将其传递到模板中，而不是连接字符串。你知道吗