如何在 Handlebars 模板中动态添加类答案

【问题标题】：How to dynamically add class in Handlebars template如何在 Handlebars 模板中动态添加类
【发布时间】：2020-01-24 22:57:27
【问题描述】：

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

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

或者我希望能够选择现有元素并向它们添加“已检查”类。它用于星级显示，如果一本书的评分为 5，那么我希望 5 个跨度中的 5 个具有选中的类并适当地设置样式。

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

我还尝试使用 for 循环将子元素附加到父 div，但我遇到了类似的问题，无法找到和选择父容器。我得到的最接近如下所示，在 for 循环中返回单个 span 元素或返回 5 个不带类的 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>");
  };
});

最后是传递给 Handlebars 模板的上下文 JSON 数据的 sn-p：

[
  {
    "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,
},

【问题讨论】：

标签： javascript html handlebars.js html-templates

【解决方案1】：

“我尝试过使用 jQuery [...] 但在搜索该元素时我得到一个空值。”

您需要等到星星被添加到 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);
});

【讨论】：