polymer 1.0 dom-repeat filter only runs once

来源：互联网发布：centos输入中文编辑：程序博客网时间：2024/06/10 02:47
http://stackoverflow.com/q/31857241/2177408
When I change the year using the drop-down, I want the list to re-filter and display the info for that chosen year. What am I missing? Changing the year does not re-filter the 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>
I have similar question, but it is just because I don't have the "this.$.vehicleList.render();" in my code. Thanks for your code! – shaosh
0 0