Polymer 1.0：在 CSS 中引用选定的 iron-list 项

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 属性，但它没有反映到一个类。您可以通过监听 selected 属性的更改并更新计算绑定中的类来手动执行此操作。

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

在原型中实现功能，例如这样。

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

然后你可以在你的 CSS 中使用selectedclass。