Polymer：来自 dom-repeat 数据项的样式父元素

Question

我对 Polymer 还很陌生，正在开发一个小型 Web 应用程序来显示使用电子标签进出大楼的工作人员。

目前，它们都显示在一个列表中，带有“Entered at hh:mm”或“Exited at hh:mm”的文字。

我希望能够将头像变灰并降低“员工卡”元素的高度。

我有一个 my-list 元素，它使用 iron-ajax 来获取数据，然后是一个 dom-repeat 模板，它遍历并显示一张员工卡。

<iron-ajax
  auto
  url="../../api/database.json"
  handle-as="json"
  last-response="{{ajaxData}}"
  debounce-duration="300">
</iron-ajax>

<template is="dom-repeat" items="[[ajaxData]]">
  <staff-card>
      <img src="{{computeAvatar()}}">
      <h2>{{item.FirstName}} {{item.Surname}}</h2>
      <p>{{setLocation(item.lastknownlocation)}} {{prettyTime(item.LastAccessTime.date)}}</p>
  </staff-card>
</template>

我的员工卡元素如下所示：

<paper-material elevation="2">
  <div class="card-header" layout horizontal center>
    <content select="img"></content>
    <content select="h2"></content>
    <content select="p"></content>
  </div>
  <div style="clear:both;"></div>
</paper-material>

所以，如果 item.lastknownlocation 是“外部”，我想降低员工卡中纸张材料的高度并将 img 设置为灰度。 （我有这方面的 css，只是没有办法应用它）

Answer 1

父元素

<iron-ajax
  auto
  url="../../api/database.json"
  handle-as="json"
  last-response="{{ajaxData}}"
  debounce-duration="300">
</iron-ajax>

<template is="dom-repeat" items="[[ajaxData]]">
  <staff-card src="{{computeAvatar()}}" header="{{item.FirstName}} {{item.Surname}}" location="{{setLocation(item.lastknownlocation)}}">
  </staff-card>
</template>

员工卡（通知纸质材料设置为动画，以便动态更新高程）

<dom-module id="staff-card">
  <template>
    <style>
    </style>
    <paper-material animated id="paper" elevation="{{computeElevation(location)}}">
      <img src="{{src}}">
      <h2>{{header}}</h2>
      <p>{{location}} {{time}}</p>
    </paper-material>


  </template>

  <script>
    (function() {
      'use strict';

      Polymer({
        is: 'staff-card',

        properties: {
          src: {},
          header: {},
          location: {},
          time: {},
        },
        computeElevation: function(location) {
          console.log(location);
          if (location.isOutside()) {
            return 1;
          } else {
            return 5;
          }
        },

      });
    })();