聚合物：来自 dom 重复数据项的样式父元素

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 是 "outside"，我想降低我的员工卡中纸张的高度-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>

员工卡片（通知paper-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;
          }
        },

      });
    })();

聚合物：来自 dom 重复数据项的样式父元素

Polymer: Style Parent Element from dom-repeat data item

html

javascript

css

jquery

polymer-1.0

父元素

员工卡片（通知paper-material设置为ANIMATED以便可以动态更新高度）