Блог

Главная - Вопросы по программированию - Handlebars.js фон вопроса -цветной полосатый для {{#каждого}}

Handlebars.js фон вопроса -цветной полосатый для {{#каждого}}

#javascript #css #handlebars.js #each

#javascript #css #handlebars.js #каждый

Вопрос:

Handlebars.js вопрос

Создание цвета фона для {{#каждого}}

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

Я использую своего помощника в полоску.Все в порядке.

Я хотел изменить цвет фона с помощью CSS:

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

Но ничего не произошло. Потому что CSS применяется до запуска цикла handlebars {{#each}} . CSS еще не видит окончательный документ с набором Таким образом, для всех строк background-color будет применяться ко всем одинаково или ни к одному. n-й дочерний элемент (четный), n-й дочерний элемент (нечетный).
Есть ли какой-либо другой более удобный способ сделать полосатый?

Комментарии:

1. Я думаю, что создание 2 классов также должно выполнять эту работу (по одному для каждого цвета и применять класс на основе индекса нечетно или четно).

2. Почему «striped» в фигурных скобках ( {{striped @index}} ), если вы просто хотите, чтобы литеральная строка была «striped» в вашем выводе? Синтаксис {{striped @index}} будет для вызова помощника, зарегистрированного с именем «striped», о котором вы не упомянули.

3. Да, я действительно не рассказал о коде моего помощника, извините

4. полосатый: index => { if (index % 2 == 0) { возвращает «WhiteSmoke»; } }

5. Почему вы смешиваете классы CSS с атрибутами встроенного стиля? Это усложняет вашу задачу. То, что определено в style атрибуте, будет переопределять то, что определено в классе. Во-вторых, я не думаю, что ваша проблема имеет какое-либо отношение к тому, когда применяется CSS.

Ответ №1:

Почему ваш CSS-селектор нацелен .row.striped ? В вашем шаблоне нет «полосатого» класса. Единственный класс, который у вас есть, это «строка», как в <div class="row"> .

«striped» — это имя вашего помощника Handlebars, который вы используете для создания цвета фона, применяемого с помощью атрибута встроенного стиля.

Я думаю, ваша проблема в том, что ваш встроенный стиль переопределяет ваш 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';
});

У меня тоже есть скрипка для этого.

Комментарии:

1. Извините. У вас одинаковые ссылки для обеих скрипок. Если вы сделаете, как вы сказали, только с помощью CSS: ` .row {цвет фона: белый дым; } .row: n-й дочерний элемент (четный) {цвет фона: черный; } `, тогда все строки будут одного цвета. И вы используете helher так же, как я внутри style = «background-color: Извините, я не вижу ничего нового. `row.striped` — это вариант, если я пишу <div class = "row striped"> . Но это не особо важно, так как суть не меняется

2. Забыл упомянуть, что я использую nodejs и express-handlebars. Но сути это тоже не меняет.

3. @Illusion: извините за неправильные ссылки. Я исправил это сейчас. Первый использует CSS и не имеет помощника; вторые используют помощника и не имеют CSS. Оба результата приводят к чередованию белых дымовых и черных строк.

4. Большое вам спасибо! Это действительно работает. Я не понял этого из-за неправильно расположенного элемента <form>, а также из-за наличия элемента <hr> . Я не привел весь код, он громоздкий, но теперь я думаю, что мне следовало разместить весь код