我有一个嵌套dom-repeat
,首先迭代公司中的员工,然后迭代员工的项目,在迭代项目时,我使用过滤器只获得成功的项目。试图使用 renderItems 但它总是给员工数量。相反,当没有员工有任何成功的项目时,我需要一种方法来了解状态。(仅当没有列出项目时)
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.rawgit.com/download/polymer-cdn/1.6.0/lib/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/1.6.0/lib/polymer/polymer.html" />
<script src="script.js"></script>
</head>
<body>
<test-element></test-element>
<dom-module id="test-element">
<template>
<div>
<h1>Test Element</h1>
<h3>Rendered Count: [[renderedCount]]</h3>
<template is="dom-if" if="{{!renderedCount}}">
<img src="https://emptyensemble.com/wp-content/themes/emptyensemble2015/assets/images/empty_ensemble_empty_set_logo.png" alt="Mountain View" style="width:250px;height:250px;">
</template>
<template is="dom-repeat" items="{{employees}}" as="employee" rendered-item-count="{{renderedCount}}">
<template is="dom-repeat" items="{{employee.projects}}" filter="{{_filterProjects()}}" as="employeeProject">
<span>Test 1 [[employeeProject.name]]</span>
<br>
</template>
</template>
</div>
</template>
<script>
Polymer({
is: 'test-element',
properties: {
employees: {
type: Array,
value: function() {
return [{
name: 'user1',
projects: [{
name: 'proj1',
status: false
}, {
name: 'proj2',
status: true
}, {
name: 'proj3',
status: true
}]
}, {
name: 'user2',
projects: [{
name: 'proj4',
status: false
}, {
name: 'proj5',
status: false
}]
}]
}
},
renderedCount: {
type: Number
}
},
_filterProjects: function() {
return function(item) {
return item.status;
};
}
});
</script>
</dom-module>
</body>
</html>