javascript - 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

这不是 mustache 的错。您的模板将呈现为:

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

请注意您的类名称周围缺少任何引号。浏览器可以在内部将其转换为您所看到的内容(我猜您正在检查浏览器的开发工具内生成的数据)。

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

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

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