Оказание полимерного элемента, созданного с использованием повтора шаблона

Question

В приведенном ниже коде мы можем создать динамические теги 7 div, если мы хотим изменить стиль третьего div, как это сделать?

<template repeat="{{ item in items }}">  
<div id="in">q{{item}}<t>{{user.question[item].time}}<t>{{user.question[item].score}} </div> 
<br><br> 
</template> 

ссылка проекта в мерзавца хаба: quiz element

Answer 1

Вы можете сделать быстрый хак

<template repeat="{{ item, i in items }}">  
    <div class="{{i}} question">q{{item}}<t>{{user.question[item].time}}<t>  {{user.question[item].score}} </div> 
    <br><br> 
</template> 

И вы можете использовать имя класса для доступа к нему.

Answer 2

Вы можете использовать contitional выражение с tokenList фильтр, построенный с использованием полимера:

<script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.3.3/platform.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.3.3/polymer.js"></script> 
 

 
<polymer-element name="question-list"> 
 

 
    <template> 
 

 
    <style> 
 
     .thirdQuestion { 
 
     border: 1px solid red; 
 
     } 
 
    </style> 
 

 
    <template repeat="{{ item, index in items }}"> 
 
     <div class="{{ {thirdQuestion: index === 2} | tokenList }} question"> 
 
     {{item}} 
 
     </div> 
 
     <br> 
 
     <br> 
 
    </template> 
 

 
    </template> 
 

 
    <script> 
 
    Polymer({ 
 
     items: [ 
 
     "item 1", 
 
     "item 2", 
 
     "item 3", 
 
     "item 4", 
 
     "item 5", 
 
     "item 6", 
 
     "item 7" 
 
     ] 
 
    }); 
 
    </script> 
 

 
</polymer-element> 
 

 
<question-list></question-list>

Answer 3

Вы можете легко сделать это с pseudo-selectors в CSS.

.question:nth-of-type(3){...}

Here is a live example.