聚合物：來自dom-repeat數據項的樣式父元素

Question

我對Polymer剛起步，並且正在開發一個小型Web應用程序，以顯示使用電子標簽進入或離開建築物的工作人員。

當前，它們全部顯示在列表中，並顯示“ Enter at 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是“ outside”，我想減少職員卡中紙張材料的高度，並將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;
          }
        },

      });
    })();