polymer 1.0 : reference selected iron-list item in CSS

Question

我正在尝试突出显示 iron-list 中选定的项目。但是，我似乎无法在 CSS 中找到任何可跟踪的属性来专门将突出显示应用于所选项目。我的模板代码如下所示:

<iron-list items="[[fileCells]]" as="item" selection-enabled>
  <template>
    <paper-icon-item on-tap="_onItemTap">
      <iron-icon icon="[[item.iconName]]" item-icon></iron-icon>
      <paper-item-body two-line>
        <div>[[item.fileName]]</div>
        <div secondary>[[item.progressValue]]</div>
      </paper-item-body>
    </paper-icon-item>
  </template>
</iron-list>
<array-selector id="selector" items="{{fileCells}}" selected="{{selected}}" toggle></array-selector>

单元格显示正确，我可以捕获对项目的点击。在开始实现 iron-list 之前，我在 iron-selector 元素内有一些静态 paper-icon-item 元素。我可以轻松地设置所选元素的样式，如下所示:

paper-icon-item.iron-selected {
  background: #B2EBF2;
}

但这在动态 iron-list 实现中不再有效，因为 paper-icon-item 的 class 属性不再适用似乎在被选择后正在更新。是否有另一个属性可以跟踪以仅设置所选项目的样式？在某处重新实现iron-selector会对我有帮助吗？

Answer 1

有一个selected属性，但它没有反射(reflect)到类中。您可以通过监听 selected 属性的更改并更新计算绑定(bind)中的类来手动执行此操作。

<paper-icon-item class$="[[_computeClass(selected)]]">

在原型(prototype)中实现该功能，例如这样。

_computeClass : function(selected) {
     return selected? "selected": "";
}

然后您可以在 CSS 中使用selected类。