时间戳

首页 > 解决方案 > 如何在 Handlebars 模板中动态添加类

javascript - 如何在 Handlebars 模板中动态添加类

问题描述

我正在尝试在我的 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>");
  };
});

最后，将一段上下文 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,
},

标签： javascripthtmlhandlebars.jshtml-templates

解决方案

“我尝试过使用 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);
});

推荐阅读