Javascript Handlebars.js问题背景色为{{{#each}

handlebar.js问题

为{{#each}制作背景色

---

但什么也没发生。因为CSS是在handlebar{{{#each}}循环运行之前应用的。CSS还没有看到带有一组的最终文档，为什么CSS选择器的目标是

.row.striped

？模板中没有“条带化”类。您仅有的类是“row”，如

中所示

“striped”是车把辅助对象的名称，用于生成应用内联样式属性的背景色

我认为你的问题在于你的内联风格覆盖了你的CSS

正如您在我们的评论中提到的，您可以完全使用CSS来实现这一点。只需从模板中删除

style

属性，并添加所需的CSS规则。只需确保您的目标不是缺少的“条带化”类。CSS看起来像：

.row {
  background-color: whitesmoke;
}

.row:nth-child(even) {
  background-color: black;
}

这里有一个例子

为了完整起见，我将解释如何使用助手。您可以删除CSS规则，然后根据索引应用所需的颜色。助手是：

Handlebars.registerHelper('striped', function (index) {
     return (index % 2 === 0) ? "WhiteSmoke" : 'black';
});

---

我对此也有自己的看法。

我认为创建两个类也应该完成这项工作（每种颜色一个，基于索引的应用类是奇数或偶数）。如果您只想在输出中使用文字字符串“striped”，为什么在花括号（

{{striped@index}}

）中使用“striped”？语法

{{striped@index}}

将用于调用注册名为“striped”的助手，您没有提到过。是的，我确实没有告诉我助手的代码，sorrystriped:index=>{if（index%2==0）{return“WhiteSmoke”；}为什么要将CSS类与内联样式属性混合在一起？这使你的任务复杂化了。

style

属性中定义的内容将覆盖类中定义的内容。第二，我认为你的问题与CSS的应用无关。对不起。两个fiddle的链接相同。如果您只使用CSS:`.row{background color:white smoke；}.row:nth child（偶数）{background color:black；}`就可以使用相同的颜色。你用helher就像我在里面一样风格=“背景色：对不起，我没有看到任何新内容。`row.striped`是我写

时的一个选项。但这并不特别重要，因为本质并没有改变。我忘了提到我使用的是nodejs和express把手。但这也不会改变本质。@错觉：很抱歉链接不正确。我现在已经修好了。第一种使用CSS，没有助手；秒用户是一个助手，没有CSS。这两种情况都会导致白烟和黑烟交替出现。非常感谢！它确实有效。我没有得到它，因为一个位置不正确的元素，以及如果有一个

---

元素。我没有给出所有的代码，这很麻烦，但现在我想我应该把所有的代码都放进去了

.row {
  background-color: whitesmoke;
}

.row:nth-child(even) {
  background-color: black;
}

Handlebars.registerHelper('striped', function (index) {
     return (index % 2 === 0) ? "WhiteSmoke" : 'black';
});