输入对象中的正向斜杠不会在Handlebars#中呈现每个分部

Question

当尝试渲染Handlebars分部时，我的对象中的所有正斜杠都会渲染为空格。

我的输入对象是这样的：

let mySkills = {
"skills": [
{
"name": "HTML5",
"icon": "/img/HTML5.png"
},
{
"name": "CSS3",
"icon": "/img/CSS3.png"
},
{
"name": "JavaScript",
"icon": "/img/JS.png"
}
]
};

Handlebars部分是这样的(我在这篇文章中简化了它。我知道它看起来不对，但重点是输出代码不正确(:

Handlebars.registerPartial(
'skillsBullet',
'<ul>{{#each skills}}<li style="background-image: url("{{icon}}");">{{name}}</li>{{/each}}</ul>'
);
$('#skills-container').append(Handlebars.compile($('#skills-template').html())(mySkills));

但输出片段如下：损坏的背景图像url

这是一个Codepen。您可以检查Elements面板以查看上面屏幕截图中的错误：https://codepen.io/car1sle/pen/NWYJeee

我已经试过了：

• 将反斜杠放在对象中的正斜杠之前，如下"icon": "/img/HTML5.png"
• 像这样在Partial中做三大花括号{{{icon}}}
• 像这样在Partial中的大括号内做常规括号{{[icon]}}

Answer 1

您的问题是由于生成的HTML格式不正确。

让我们检查一下你的部分：

<li style="background-image: url("{{icon}}");">

您正在使用双引号("(来包装style=值和url()值。Handlebars处理后，生成的HTML变为：

<li style="background-image: url("/img/CSS3.png");">

此HTML指示浏览器两个双引号之间的style value为background-image: url(。然后，浏览器试图确定如何处理/img/CSS3.png");"，因为浏览器可以容忍格式错误的HTML，所以它会忽略它并继续

为了使代码正常工作，您需要对背景图像URL使用与style属性不同的引号。

<li style="background-image: url('{{icon}}');">

我已经为您的Codepen提供了一个例子。