javascript - 聚合物 : Style Parent Element from dom-repeat data item

Question

我是 Polymer 的新手，正在开发一个小型 Web 应用程序来显示使用电子标签进入或离开大楼的员工。

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

我希望能够将头像变灰并降低“staff-card”元素的高度。

我有一个 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 是“外部”，我想降低员工名片中纸质 Material 的高度并将 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>

员工卡(通知纸质 Material 设置为ANIMATED，以便可以动态更新高度)

<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;
          }
        },

      });
    })();