如何使用Polymer重复一定数量的图标？

Question

我只需要做一些简单的事情，但我很困惑如何去做。

我有一个学生名单，有一定数量的学分。我想为每个完成的学分显示一颗星。

例如，

约翰★ 莎拉★★
肯★ 贾里德★★★★

学生的信息包含在JSON中，该JSON绑定到每个学生的div，因此可以通过{{student.credits}}等方式访问，但<template repeat>之类的内容并不是＃＆＃ 39;似乎是为了这样的事情而做的。我还想也许我可以添加一个类star2并覆盖默认图标CSS，但由于每个图标都使用SVG，它不想像标准图像背景那样重复。

非常感谢任何帮助或指示！

Answer 1

您可以使用我在rating-element网络组件中使用的技巧。

1. 创建一个数组，其长度可方便地为学分数：

   created: function () {
     this._credits = new Array(this.credits);
   },
   

2. 在repeat模板中使用此方便的数组：

   <template repeat="{{_ in _credits}}"></div>
     <div>★</div>
   </template>
   

作为参考，您可以查看devel分支中的完整组件，特别是template repeat和created callback代码片段。

Answer 2

我热衷于php它就像

For($i=0; $i <= $score; $i++){
    echo "<img src='images/star.jpg' />";
}