Как я могу повторить определенное количество значков с помощью Polymer?

Question

Мне просто нужно сделать что-то простое, но я не понимаю, как это сделать.

У меня есть список студентов с определенным количеством кредитов. Я хочу отображать одну звезду для каждого завершенного кредита.

например,

Джон ★
Сара ★★
Кен ★
Джаред ★★★★

Информация студента содержится в JSON, который связан с DIV каждого студента, чтобы он мог доступ через {{student.credits}} и т. д., но что-то вроде <template repeat>, похоже, не сделано для чего-то подобного. Я также подумал, что, может быть, я мог бы просто добавить класс, такой как star2, и переопределить значок по умолчанию CSS, но поскольку каждый значок использует SVG, он не хочет повторять, как это делает стандартный фон изображения.

Любые советы будут полезными!

Answer 1

Im увлечен PHP это будет как

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

Answer 2

Вы можете использовать трюк я использовал в 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.