使用带有空格的 Jinja2 字符串作为 HTML 属性

Question

如果我向 Jinja2 传递一个包含空格的字符串，例如：

myStr = "my string" #a google.appengine.ext.db.StringProperty

然后渲染它，例如：

<div class={{ myStr }}>

生成的 HTML 是：

<div class="my" string>

我已尝试通过创建过滤器来解决此问题，用%20 或  替换空格，但似乎两者都无效，呈现文字字符串，如<div class="my string">。

我发现真正呈现预期结果的唯一方法是：

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

但这是不受欢迎的风格；尤其是因为它完全破坏了（“官方”）语法高亮。

请注意，这会影响所有属性（我已经尝试过），而不仅仅是class。 （例如，在title 中想要一个空格似乎是合理的）。

我错过了什么，应该如何处理？

Answer 1

Jinja 2 不会对呈现的 HTML 做这样的事情；是您的 浏览器 会因为属性周围缺少引号而绊倒。本质上，您正在生成：

<div class=my string>

这意味着空格后面的部分是新属性，而不是class 属性的一部分。您会注意到代码美化器的颜色 my 和 string 不同； string 的颜色与 class 的颜色相同。

添加属性以正确描述属性：

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

产生输出

<div class="my string">

如果这会破坏您的荧光笔，请使用更好的语法荧光笔。对于 TextMate 和 Sublime Text，Jinja 作者有provided a package，他还为ViM 制作了一个。

是的，Sublime Text 高亮不突出 HTML 属性中的 Jinja2 结构：

这可能是设计使然，并不是您做错了什么的迹象。