polymer 1.0 dom重复过滤器仅运行一次_Polymer

polymer 1.0 dom重复过滤器仅运行一次

polymer

polymer 1.0 dom重复过滤器仅运行一次,polymer,Polymer,当我使用下拉列表更改年份时，我希望列表重新筛选并显示所选年份的信息。我错过了什么？更改年份不会重新筛选dom重复 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <base href="http://polygit.org/components/"> <script src="webcomponentsjs/webcomponents-lite.min.js"&

当我使用下拉列表更改年份时，我希望列表重新筛选并显示所选年份的信息。我错过了什么？更改年份不会重新筛选dom重复

<!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>


下拉列表
.更高{
高度：120px；
}
[vertical align=“top”]ul{
边际上限：0；
}
[vertical align=“bottom”]ul{
页边距底部：0；
}
按钮，纸按钮{
边框：1px实心#ccc；
背景色：#eee；
/*填充：1em*/
边界半径：3px；
光标：指针；
}
按钮：焦点{
大纲：无；
边框颜色：蓝色；
}
年份
{{Year}
{{item.year}
Make
{{Make}
{{item.make}
模型
{{Model}
{{item.model}
引擎
{{Engine}
{{item.engine}
按所选年份筛选的车辆列表：
年份{{item.Year}
Make{{item.Make}
模型{{item.Model}
引擎{{item.Engine}
挑选
所选车辆：
{{item.year}
{{item.make}
{{item.model}
{{item.engine}
聚合物({
是：“x-demo”，
特性：{
allData:{type:数组，
值：函数（）{
返回[{年份：'2015'，品牌：'HONDA'，型号：'CB300F'，发动机：'300cc'}，
{年份：'2014'，品牌：'HONDA'，型号：'CBR300R'，发动机：'300cc'}]；
}         
},
年份：{type:String，值：'2014'，notify:true}
},
观察员：[
'年更改（年）'
],
年份：职能（项目）{
控制台日志（项目）；
此.set（'item.year'，item）；
此.$.vehicleList.render（）；
},
年份匹配：功能（项目）{
console.log（“检查年份”）；
return item.year=this.year；
},
切换选择：功能（e）{
var项目=此.$.vehicleList.itemForElement（e.target）；
此.$.selector.select（项）；
},
年份：功能（e）{
this.year=e.target.innerText；
},
makeTapped：函数（e）{
this.make=e.target.innerText；
},
模型：功能（e）{
this.model=e.target.innerText；
},
引擎配置：功能（e）{
this.engine=e.target.innerText；
}
});

这对我很有用

 <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, '');
        }
    });
});


HTMLImports.whenReady（函数（）{
聚合物({
是：“x-demo”，
特性：{
所有数据：{
类型：数组，
价值：[{
年份：“2015年”，
品牌：'本田'，
型号：'CB300F'，
发动机：300毫升
}, {
年份：'2014'，
品牌：'本田'，
型号：'CBR300R'，
发动机：300毫升
}]        
},
年份：{
类型：
一串
价值：'2014'，
观察家:"年变"
}
},
年份更改：函数（）{
console.log（今年）
此.$.vehicleList.render（）；
},
年份匹配：功能（项目）{
返回项.year==本.year；
},
切换选择：功能（e）{
var项目=此.$.vehicleList.itemForElement（e.target）；
此.$.selector.select（项）；
},
年份：功能（事件）{
var res=event.target.innerText | | event.target.textContent；
this.year=res.replace（/\s+/g'）；
},
makeTapped：函数（事件）{
var res=event.target.innerText | | event.target.textContent；
this.make=res.replace（/\s+/g'，）；
},
模型：功能（事件）{
var res=event.target.innerText | | event.target.textContent；
this.model=res.replace（/\s+/g'，）；
},
EngineTaped:函数（事件）{
var res=event.target.innerText | | event.target.textContent；
this.engine=res.replace（/\s+/g'）；
}
});
});

jsbin有一个小故障，下拉列表不可见，但仍然可以单击。我有类似的问题，但这只是因为我的代码中没有“this.$.vehicleList.render（）；”。谢谢你的代码！谢谢我所需要的是一个双等号而不是一个：returnitem.year==this.year；但是别忘了firefox不知道innerText属性并返回undefined