Bui*_*lda 4 web-component polymer polymer-1.0
如果在阵列中找不到过滤器,有人可以帮助如何显示此模板.
<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进口伤了你的普拉克(查看所有从错误中registerElement).那是因为其他导入尝试从不同的URL导入Polymerdom-if里面dom-repeatitems将不起作用,因为使用时items属性不会更改filter.变化是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>