如何在 Handlebars 模板中动态添加 class

Question

我正在尝试在我的 Handlebars 模板中动态创建 HTML 元素，特别是：

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

或者我希望能够 select 现有元素并向其添加 'checked' class。它用于星级评分显示，如果一本书的评分为 5，那么我希望 5 个 span 中的 5 个进行检查 class 并设置适当的样式。

到目前为止，我已经尝试使用 jQuery 来定位 span 元素并添加 class 即。 $('#star-1').addClass('checked'); 但是我在搜索该元素时得到了一个空值。

我还尝试使用 for 循环将子元素附加到父元素 div，但我遇到了类似的问题，无法找到并 select 父容器。我得到的最接近的如下所示，在 for 循环中返回单个 span 元素或返回 5 个没有 class 的 span 元素。任何帮助将不胜感激。

在我的 template.html 文件中：

<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>

然后在我的 app.js 文件中：

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,
},

Answer 1

"I've tried using jQuery [...] But I get a null value when searching for that element."

您需要等到星星添加到 DOM 之后再执行此操作。

关于你的 for 循环，它只会执行一次迭代，因为你在第一次迭代期间 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);
});

如何在 Handlebars 模板中动态添加 class

How to dynamically add class in Handlebars template

html

javascript

handlebars.js

html-templates