Knockout.js：如何根据数组中stars数值生成对应数量的星星HTML元素

别担心，刚上手Knockout.js遇到这种小问题太正常啦！我来帮你搞定根据stars数值生成对应数量<i class="fas fa-star"></i>的需求～

核心思路 #

Knockout的foreach绑定可以遍历数组生成重复元素，我们只需要把stars的数值转换成一个对应长度的数组，让foreach循环这个数组就能生成对应数量的星星了。

方法一：直接在HTML绑定中生成临时数组（无需修改ViewModel） #

这种方法最快捷，不用改动你现有的数据结构，直接在stars容器上添加foreach绑定：

修改后的HTML代码：

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

说明：

• Array(stars)会创建一个长度等于stars数值的空数组
• .fill(0)是给数组填充占位值（空数组Knockout不会遍历，填充任意值都可以）
• 这样foreach就会循环stars次，每次生成一个星星图标

方法二：在ViewModel中添加计算属性（更灵活） #

如果后续需要对星星做更多逻辑处理，可以给每个score对象添加一个计算属性，返回对应长度的数组：

ViewModel代码示例：

var viewModel = {
  scores: ko.observableArray([
    { 
      title: 'Score One', 
      stars: 5,
      // 生成对应长度的数组供foreach遍历
      starList: ko.computed(function() {
        return Array(this.stars).fill(null);
      }, this)
    }
  ])
};

ko.applyBindings(viewModel);

对应的HTML绑定：

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

注意事项：如果stars是可观察属性 #

如果你的stars是Knockout的可观察对象（比如stars: ko.observable(5)），记得在绑定中调用()获取实际数值：

<div class="stars" data-bind="foreach: Array(stars()).fill(0)">
  <i class="fas fa-star"></i>
</div>

这样就能完美根据stars的数值生成对应数量的星星啦～

内容的提问来源于stack exchange，提问作者user8516249