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

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

在原型中实现函数，例如这样。

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

然后你可以在你的 CSS.

中使用 selectedclass

Polymer 1.0: 参考 CSS 中选定的铁表项目

Polymer 1.0: reference selected iron-list item in CSS

polymer

polymer-1.0