CODEWITHSUNDEEP
javascriptcsshandlebars.jseach
Illusion
Illusion

Reputation: 71

Handlebars.js question background-color striped for {{#each}}

Handlebars.js question

Making background color for {{#each}}

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

I use my helper striped.It`s Ok.

I wanted to change the background color via CSS:

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

But nothing happened. Because the CSS is applied before the handlebars {{#each}} loop runs. CSS doesn't see the final document yet with a set of <div class = "row". Thus, for all row, background-color will be applied to all the same or none. nth-child (even), nth-child (odd). Is there any other more convenient way to do striped?

Upvotes: 0

Views: 1552

Answers (1)

76484
76484

Reputation: 9003

Why does your CSS selector target .row.striped? There is no "striped" class in your template. The only class you have is "row", as in <div class="row">.

"striped" is the name of your Handlebars helper, which you are using to generate a background-color applied with an inline-style attribute.

I think your problem is that your inline-style is overriding your CSS.

As you alluded to in our discussion in the comments, you can do this purely with CSS. Just eliminate the style attribute from your template and add the required CSS rules. Just make sure you are not targeting the missing "striped" class. The CSS would look something like:

.row {
  background-color: whitesmoke;
}

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

Here is an example fiddle.

For the sake of completeness, I will explain how you could use the Helper. You would remove the CSS rules and just apply the desired color based on the index. The helper would be:

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

I have a fiddle for this as well.

Upvotes: 1

Related Questions