knockout.js - 根据数组中的数字创建 HTML

Question

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

我有一个充满数据的数组。一个值是“星”，它是一个数字。在我的 HTML 中，我想基于该值创建 HTML 元素。例如，如果值为 4，我想要 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 的值设置为 stars 的值（如<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>