当我使用下拉列表更改年份时，我希望列表重新过滤并显示所选年份的信息。我错过了什么？更改年份不会重新过滤dom-repeat。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<base href="http://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
<title>dropdown</title>
<link rel="import" href="http://polygit.org/components/paper-menu/paper-menu.html">
<link rel="import" href="http://polygit.org/components/paper-item/paper-item.html">
<link rel="import" href="http://polygit.org/components/paper-button/paper-button.html">
<link rel="import" href="http://polygit.org/components/paper-menu-button/paper-menu-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="x-demo">
<template>
<div class="horizontal-section flex layout horizontal taller">
<paper-menu-button>
<paper-button icon="menu" class="dropdown-trigger"><span>Year<br/></span><span>{{year}}</span></paper-button>
<paper-menu id="selectedYear" class="dropdown-content" selected="{{selectedIndex}}">
<template is="dom-repeat" items="{{allData}}">
<paper-item on-tap='yearTapped'>{{item.year}}</paper-item>
</template>
</paper-menu>
</paper-menu-button>
<paper-menu-button>
<paper-button icon="menu" class="dropdown-trigger"><span>Make<br/></span><span>{{make}}</span></paper-button>
<paper-menu id="selectedMake" class="dropdown-content" selected="{{selectedIndex}}">
<template is="dom-repeat" items="{{allData}}">
<paper-item on-tap='makeTapped'>{{item.make}}</paper-item>
</template>
</paper-menu>
</paper-menu-button>
<paper-menu-button>
<paper-button icon="menu" class="dropdown-trigger"><span>Model<br/></span><span>{{model}}</span></paper-button>
<paper-menu id="selectedModel" class="dropdown-content" selected="{{selectedIndex}}">
<template is="dom-repeat" items="{{allData}}">
<paper-item on-tap='modelTapped'>{{item.model}}</paper-item>
</template>
</paper-menu>
</paper-menu-button>
<paper-menu-button>
<paper-button icon="menu" class="dropdown-trigger"><span>Engine<br/></span><span>{{engine}}</span></paper-button>
<paper-menu id="selectedEngine" class="dropdown-content" selected="{{selectedIndex}}">
<template is="dom-repeat" items="{{allData}}">
<paper-item on-tap='engineTapped'>{{item.engine}}</paper-item>
</template>
</paper-menu>
</paper-menu-button>
</div>
<div>Vehicle list filtered by selected year: </div>
<template is="dom-repeat" id="vehicleList" items="{{allData}}" filter="yearMatch" observe="year item.year">
<div>Year <span>{{item.year}}</span></div>
<div>Make <span>{{item.make}}</span></div>
<div>Model <span>{{item.model}}</span></div>
<div>Engine <span>{{item.engine}}</span></div>
<button on-click="toggleSelection">Select</button>
</template>
<array-selector id="selector" items="{{allData}}" selected="{{selected}}" multi toggle></array-selector>
<div>Selected vehicle: </div>
<template is="dom-repeat" items="{{selected}}">
<div><span>{{item.year}}</span></div>
<div><span>{{item.make}}</span></div>
<div><span>{{item.model}}</span></div>
<div><span>{{item.engine}}</span></div>
</template>
</template>
<script>
Polymer({
is: 'x-demo',
properties:{
allData:{type:Array,
value: function() {
return [{year:'2015',make:'HONDA',model:'CB300F',engine:'300cc'},
{year:'2014',make:'HONDA',model:'CBR300R',engine:'300cc'}];
}
},
year:{type:String,value:'2014',notify:true}
},
observers: [
'yearChanged(year)'
],
yearChanged: function(item) {
console.log(item);
this.set('item.year', item);
this.$.vehicleList.render();
},
yearMatch: function(item) {
console.log('year checked');
return item.year = this.year;
},
toggleSelection: function(e) {
var item = this.$.vehicleList.itemForElement(e.target);
this.$.selector.select(item);
},
yearTapped: function(e) {
this.year=e.target.innerText;
},
makeTapped: function(e) {
this.make=e.target.innerText;
},
modelTapped: function(e) {
this.model=e.target.innerText;
},
engineTapped: function(e) {
this.engine=e.target.innerText;
}
});
</script>
</dom-module>
<x-demo></x-demo>
</body>
</html>
答案 0 :(得分：0)
这对我有用
<script>
HTMLImports.whenReady(function () {
Polymer({
is: 'x-demo',
properties:{
allData:{
type:Array,
value: [{
year:'2015',
make:'HONDA',
model:'CB300F',
engine:'300cc'
}, {
year:'2014',
make:'HONDA',
model:'CBR300R',
engine:'300cc'
}]
},
year:{
type:
String,
value:'2014',
observer: 'yearChanged'
}
},
yearChanged: function() {
console.log(this.year)
this.$.vehicleList.render();
},
yearMatch: function(item) {
return item.year == this.year;
},
toggleSelection: function(e) {
var item = this.$.vehicleList.itemForElement(e.target);
this.$.selector.select(item);
},
yearTapped: function(event) {
var res = event.target.innerText || event.target.textContent;
this.year = res.replace(/\s+/g, '');
},
makeTapped: function(event) {
var res = event.target.innerText || event.target.textContent;
this.make = res.replace(/\s+/g, '');
},
modelTapped: function(event) {
var res = event.target.innerText || event.target.textContent;
this.model = res.replace(/\s+/g, '');
},
engineTapped: function(event) {
var res = event.target.innerText || event.target.textContent;
this.engine = res.replace(/\s+/g, '');
}
});
});