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>

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

如果您想将 class 个名称分组为单个 class 属性值，您的模板应在变量周围包含引号：

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

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

Answer 2

不熟悉Mustache.js，但例如 ejs 是这样工作的：

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

所以用引号试试你的代码:

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

Answer 3

试试三胡子：{{{width}}}。这可以防止 HTML 转义，如果用作 {{width}}.

Mustache.js splits HTML attibuts between whitespaces