如果在数组中找不到过滤器，有人可以帮助如何使这个模板显示。
<template is="dom-if" if="{{itemsEmpty}}">
The array is empty!
</template>
这是我的整个代码。但由于某些原因，dom-if 模板中的 if 条件不起作用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src='bower_components/webcomponentsjs/webcomponents-lite.min.js'></script>
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/iron-image/iron-image.html">
<!--<link rel="import" href="bower_components/iron-ajax/iron-ajax.html">-->
<link rel="import" href="bower_components/paper-item/paper-item.html">
<link rel="import" href="bower_components/paper-input/paper-input.html">
<link rel="import" href="bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="bower_components/paper-listbox/paper-listbox.html">
<link rel="import" href="bower_components/paper-button/paper-button.html">
<style>
.taller{
height:120px;
}
[vertical-align="top"] ul {
margin-top: 0;
}
[vertical-align="bottom"] ul {
margin-bottom: 0;
}
button, paper-button {
border: 1px solid #ccc;
background-color: #eee;
/*padding: 1em;*/
border-radius: 3px;
cursor: pointer;
}
button:focus {
outline: none;
border-color: blue;
}
</style>
</head>
<body>
<dom-module id="employee-list">
<template>
<paper-input value="{{filterValue}}" label="Search For a Company" floatingLabel id="searchCompany"></paper-input>
<paper-dropdown-menu label="Select Project Type">
<paper-listbox class="dropdown-content" >
<template is="dom-repeat" items="{{items}}" as="test" filter="{{Filter(filterValue:input)}}">
<paper-item value="{{test.fname}}">{{test.fname}} - {{test.lname}}</paper-item>
</template>
</paper-listbox>
</paper-dropdown-menu>
<paper-listbox >
<template is="dom-repeat" items="{{items}}" filter="{{Filter(filterValue)}}">
<div class="row">
<div class="col-sm-12" style="font-size:15px;font-family:'Open Sans'">
{{item.fname}} - {{item.lname}}
</div>
<hr />
<template is="dom-if" if="{{itemsEmpty}}">
The array is empty!
</template>
</div>
</template>
</paper-listbox>
</template>
<script>
Polymer({
is: 'employee-list',
properties: {
items: {
type: Array,
observer: '_itemsChanged'
},
filterValue: {
type: String,
notify:true
},
itemsEmpty: {
type: Boolean
}
},
ready: function() {
this.items = [{'fname': 'Jack', 'lname':'Bayo'}, {'fname': 'Skellington','lname':'Dar' }];
},
_itemsChanged: function(items){
this.itemsEmpty = items.length == 0;
},
Filter: function (val) {
return function (items) {
if (!items) return false;
if (val != null || val != undefined) {
return (items.fname && ~items.fname.toLowerCase().indexOf(val.toLowerCase())) ||
(items.lname && ~items.lname.toLowerCase().indexOf(val.toLowerCase()));
}
else
return true;
};
}
});
</script>
</dom-module>
<employee-list></employee-list>
</body>
</html>
我将非常感谢这里的任何帮助。这是plunker:http://plnkr.co/edit/Qy6LeAfe93u4CK2G43eX?p=preview
谢谢
最佳答案
我发现您的样本存在许多问题:
polymer.html import 破坏了你的笨拙(查看 registerElement 中的所有错误)。这是因为其他导入尝试从不同的 URL 导入 Polymer dom-if在 dom-repeat 内items不起作用，因为使用 filter 时 items 属性没有改变. 有什么变化是
renderedItemCount 属性，您可以观察并使用它来控制 dom-if .每当过滤器触发或 items 时，属性都会更新。数组变化。总结一下:
dom-if外接中继器dom-repeat : rendered-item-count="{{renderedCount}}" if使用实际呈现的项目计数的属性:if="{{!renderedCount}}" 以下是元素模板的外观:
<paper-input value="{{filterValue}}" label="Search For a Company" floatingLabel id="searchCompany"></paper-input>
<paper-listbox >
<template is="dom-repeat" items="{{items}}" filter="{{Filter(filterValue)}}" rendered-item-count="{{renderedCount}}">
<div class="row">
<div class="col-sm-12" style="font-size:15px;font-family:'Open Sans'">
{{item.fname}} - {{item.lname}}
</div>
<hr />
</div>
</template>
<template is="dom-if" if="{{!renderedCount}}">
The array is empty!
</template>
</paper-listbox>
关于polymer - 如果 Polymer Js 中的数组为空，想要显示消息，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37264323/