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

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 中心的项目 link :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>

并且您可以使用 class 名称访问它。

Answer 2

您可以将条件表达式与聚合物内置的标记列表过滤器一起使用：

<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.

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

Rendering of polymer element created using template repeat

polymer