数据绑定foreach一个可观察的数字

时间:2019-05-05 07:47:29

标签: typescript knockout.js knockout-binding-handlers

我正在尝试为列表中的每个项目显示星星

我有一个界面,该界面在视频上具有5星级得分,我该如何对得分进行计数?而不是为得分创建数组?

interface Video{
    Score: number;
}
<td>
    <span data-bind="foreach: score">
       <span class="glyphicon-star"></span>
    </span>
    <span data-bind="foreach: 5 - score">
       <span class="glyphicon-star-empty"></span>
    </span>
</td>

1 个答案:

答案 0 :(得分:0)

您可以使用Array.from()Array(score)根据得分创建一个数组

Array.from({ length: score })

[...Array(score)]

(如果是score(),请使用observable

这是一个最小的片段:

const model = {
  score: 3
}

ko.applyBindings(model)
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<span data-bind="foreach: Array.from({ length: score })">
   <span class="glyphicon-star">*</span>
</span>