Javascript 聚合：从dom重复数据项设置父元素的样式

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

目前，它们都显示在一个列表中，文本显示为“在hh:mm时输入”或“在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>

{{item.FirstName}{{item.names}}
{{setLocation（item.lastknownlocation）}{{prettyTime（item.LastAccessTime.date）}}

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

<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.lastKnown位置为“外部”，我希望降低员工卡中纸张材质的标高，并将img设置为灰度。（我有这个css，只是没有应用它的方法）

父元素

员工卡（请注意，纸张材质已设置为动画，以便可以动态更新高程）

{{header}}
{{location}{{time}

（功能（）{
"严格使用",；
聚合物({
是‘员工卡’，
特性：{
src:{}，
标题：{}，
地点：{}，
时间：{}，
},
计算提升：功能（位置）{
控制台日志（位置）；
if（location.isOutside（））{
返回1；
}否则{
返回5；
}
},
});
})();

Chris，非常感谢您的回复。我不知道我是否不明白，或者我做错了什么，但是ComputeLevation功能似乎从未启动过；渲染元素时，员工卡的最后一个已知位置属性将被删除，尽管我也看不出我们在哪里使用了它。欢迎任何进一步的想法。您有这行“elevation=“{{computeElevation（lastKnowLocation）}"? 这是调用ComputeLevation函数所必需的。@Alex Fiorello在呈现元素时删除职员卡的最后一个已知位置属性是什么意思？你能发布你的setLocation函数吗？是的，函数computeElevation在那里，我刚刚发现它没有启动，因为这里使用的lastKnownLocation是无效的。如果我把它从括号中去掉，函数就被调用了，但是显然没有做我们想要的事情，我想我有点困惑了。在员工卡中，如何设置变量lastKnownLocation？谢谢Chris。有了你上面编辑过的帖子，我就可以让它工作了，我在月球上。感谢您抽出时间再次解释清楚。

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

      });
    })();