我是 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,只是没有办法应用它)
最佳答案
父元素
<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;
}
},
});
})();
关于javascript - 聚合物 : Style Parent Element from dom-repeat data item,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34705639/