根据数组中的数字创建 HTML

Question

第一次使用 KO，很抱歉这个问题听起来很愚蠢。

我有一个充满数据的数组。一个值是 'stars'，这是一个数字。在我的 HTML 中，我想根据该值创建 HTML 元素。例如，如果值为四，我想要 4 个元素。如果值为 5，我想要 5 个元素，依此类推。我正确地绑定了其余的数据，这是我不确定的一部分。

我想要复制的元素是“fas fa-star”

数据

scores: [
    {
        title: 'Score One',
        stars: 5,
    },
}

HTML

<ul class="scores" data-bind="foreach: scores">
    <li>
       <div class="title" data-bind="text: title"></div>
       <div class="stars">
           <i class="fas fa-star"></i>
       </div>
     </li>
 </ul>

Answer 1

如果您尝试将 class 的值设置为星星的值（如 <div class="5">），那么以下应该有效：

<ul class="scores" data-bind="foreach: scores">
    <li>
       <div class="title" data-bind="text: title"></div>
       <div data-bind="attr: { class: stars }">
           <i class="fas fa-star"></i>
       </div>
     </li>
 </ul>

编辑： 重新阅读您的问题后，这就是您要查找的内容：

<ul class="scores" data-bind="foreach: scores">
    <li>
       <div class="title" data-bind="text: title"></div>
       <div data-bind="foreach: new Array(stars)"> // <-- replaced scores with stars
           <i class="fas fa-star"></i>
       </div>
     </li>
 </ul>

根据数组中的数字创建 HTML

Create HTML based on number in array

knockout.js

knockout-binding-handlers