Mustache.js 在空格之间分割 HTML 属性

Question

Mustache.js 将一个 HTML 属性拆分为多个空格之间的 HTML 属性。我怎样才能保持属性不变？

要渲染的对象（宽度包含空格）

cardpool = {
   width:"col-md-offset-3 col-md-6 col-sm-4"
 }

使用的模板

<div class={{width}}>
</div>

错误的结果（Mustache.js 在空格之间分割属性）：

<div class="col-md-offset-3" col-md-6="" col-sm-4="">
</div>

预期结果（我想保留属性中的空格）

<div class="col-md-offset-3 col-md-6 col-sm-4">
</div>

您有解决方案来获得预期结果吗？

谢谢您的帮助。

Answer 1

这不是小胡子的错。您的模板将呈现为：

<div class=col-md-offset-3 col-md-6 col-sm-4>
</div>

请注意类名周围没有引号。浏览器可以在内部将其转换为您所看到的内容（我猜您正在检查浏览器的开发工具中生成的数据）。

如果要将类名称分组为单个类属性值，则模板应在变量两侧包含引号：

<div class="{{width}}">
</div>

Mustache（大部分）不知道它的使用上下文，因此它不知道如果值包含空格，HTML 中的属性应该用引号引起来。因此，您需要自己添加这些。

Answer 2

尝试三重胡子：

{{{width}}}

。这可以防止 HTML 转义，如果用作

{{width}}

，则会发生这种情况。

Answer 3

不熟悉 Mustache.js，但 ejs 的工作原理如下：

<div class="<%= preRendData.class %>"></div>

所以尝试使用引号的代码：

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