Как динамически добавить класс в шаблон Handlebars - PullRequest
Новая
       60

Как динамически добавить класс в шаблон Handlebars

0 голосов
/ 25 января 2020

Я пытаюсь либо динамически создавать элементы HTML в моем шаблоне Handlebars, а именно: 

<span class="fa fa-star checked"></span>

Или я хочу иметь возможность выбирать существующие элементы и добавлять к ним класс «флажок». Это для отображения рейтинга звезд, если книга имеет рейтинг 5, то я хочу, чтобы 5 из 5 диапазонов имели проверенный класс и стилизовались соответствующим образом.

До сих пор я пытался использовать jQuery для выберите элементы span и добавьте класс ie. $('#star-1').addClass('checked'); Но при поиске этого элемента я получаю нулевое значение.

Я также пытался добавить дочерние элементы в родительский div с помощью for для l oop, но у меня возникла аналогичная проблема с не возможность найти и выбрать родительский контейнер. Ниже показан мой ближайший пример с возвращением одного элемента span в a для l oop или с возвратом 5 элементов span без класса. Любая помощь будет оценена.

В моем шаблоне. html file: 

<div class="rating-container">
    {{#renderStars rating}}
    <span class="fa fa-star" id="star-1"></span>
    <span class="fa fa-star" id="star-2"></span>
    <span class="fa fa-star" id="star-3"></span>
    <span class="fa fa-star" id="star-4"></span>
    <span class="fa fa-star" id="star-5"></span>
    {{/renderStars}}
</div>

Затем в моем приложении. js file: 

Handlebars.registerHelper('renderStars', (rating) => {
  for (let i = 0; i <= rating - 1; i++) {
    return new Handlebars.SafeString("<span class='fa fa-star checked'></span>");
  };
});

Наконец фрагмент контекста JSON данных, передаваемых в шаблон Handlebars: 

[
  {
    "month": "January",
    "image": "/images/sapiens.jpg",
    "altText": "Sapiens: A Brief History of Humankind, book by Yuval Noah Harari",
    "title": "Sapiens: A Brief History of Humankind",
    "author": "Yuval Noah Harari",
    "rating": 5,
},

1 Ответ

1 голос
/ 25 января 2020

"Я пытался использовать jQuery [...] Но при поиске этого элемента я получаю нулевое значение."

Вам нужно подождать, пока звезды перед добавлением в DOM.

Что касается вашего for l oop, он будет выполнять только одну итерацию, поскольку вы return (завершите функцию) во время первой итерации.

Вы можете попробовать это: 

Handlebars.registerHelper('renderStars', (rating) => {
  let result = '';
  for (let i = 1; i <= 5; i++) {
    let checked = rating >= i ? ' checked' : '';
    result += `<span class='fa fa-star${checked}'></span>`;
  }
  return new Handlebars.SafeString(result);
});
...