使用模板重复创建的聚合物元素的渲染

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>

git hub中的项目链接：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

您可以使用带有使用polymer：

内置的tokenList过滤器的contitional表达式

<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

您可以使用CSS中的pseudo-selectors轻松完成此操作。

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

Here is a live example.