Handlebars.js 问题背景颜色条纹为 {{#each}}

Question

Handlebars.js 问题

为{{#each}}制作背景颜色

    <form action = "/ editday" method = "post">
    <div class = "row" style = "background-color: {{striped @index}}">

我使用我的助手条纹。没关系。

我想通过 CSS 改变背景颜色：

.row.striped> div: nth-child (even) {
  background-color: # 000;
}

但是什么也没发生。因为 CSS 是在把手 {{#each}} 循环运行之前应用的。 CSS 还没有看到带有一组

【问题讨论】：

• 我认为创建 2 个类也应该完成这项工作（每种颜色一个，并且基于索引应用类是奇数或偶数）。
• 如果您只想要输出中的文字字符串“条纹”，为什么要在大括号 ({{striped @index}}) 中使用“条纹”？语法{{striped @index}} 将用于调用以“striped”名称注册的 Helper - 您尚未提及。
• 是的，我真的没有告诉我助手的代码，对不起
• 条纹：index => { if (index % 2 == 0) { return "WhiteSmoke"; } }
• 为什么要混合 CSS 类和内联样式属性？这使您的任务复杂化。 style 属性中定义的内容将覆盖类中定义的内容。其次，我认为您的问题与 when 应用 CSS 没有任何关系。

Answer 1

为什么您的 CSS 选择器以 .row.striped 为目标？您的模板中没有“条纹”类。你唯一的类是“row”，如<div class="row">。

“striped”是您的 Handlebars 助手的名称，您使用它来生成应用内联样式属性的背景颜色。

我认为你的问题是你的内联样式覆盖了你的 CSS。

正如您在我们在 cmets 中的讨论中提到的，您完全可以使用 CSS 来完成此操作。只需从模板中删除 style 属性并添加所需的 CSS 规则。只要确保您没有针对缺少的“条纹”类。 CSS 看起来像：

.row {
  background-color: whitesmoke;
}

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

这是一个例子fiddle。

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

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

我也有一个fiddle。