如何在 Handlebars 模板中動態添加類

Question

我正在嘗試在我的 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 數據片段：

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

“我嘗試過使用 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);
});