Vaadin 组合框排序答案

【问题标题】：Vaadin-combo-box sortingVaadin 组合框排序
【发布时间】：2017-05-12 10:27:09
【问题描述】：

我正在尝试按字母顺序对一组对象进行排序。但是，不知何故，vaadin-combo-box Polymer 元素仅在排序后显示数组中的第一项（即使数组中有更多项）

我从 Firebase（称为 settingsData）获取数据，因此我必须使用拼接观察器来查看是否正在添加或删除数据：

观察者

observers: [
  'sortData(settingsData.splices)'
],



sortData: function(newD, oldD) {
   if(newD) {
       var tmp = this.settingsData.sort(function(a,b) {return (a.name.toUpperCase() > b.name.toUpperCase()) ? 1 : ((b.name.toUpperCase() > a.name.toUpperCase()) ? -1 : 0);} );
       //tmp is an array in the correct order
       this.set("filteredItems", tmp);
    }
}

HTML

 <vaadin-combo-box id="picker" label="[[label]]"  items="[[filteredItems]]"  item-label-path="name" item-value-path="name" value="{{valueText}}" on-value-changed="valueChanged"></vaadin-combo-box>

【问题讨论】：

标签： sorting firebase polymer vaadin

【解决方案1】：

不知何故，数组突变的观察者在第一次之后没有被解雇。这意味着vaadin-combo-box 的视图没有正确渲染，这似乎有点奇怪？

每次我尝试设置新数据时清除数组都可以解决问题。

 this.set("filteredItems", []);
 this.set("filteredItems", tmp);

【讨论】：

这实际上是 Polymer 的最佳实践；它强制 DOM 更新。 :)

【解决方案2】：

this.settingsData.sort 要么真的只返回 1 项，要么 Firebase 的响应式数据破坏了它。无法使用内联数组数据重现它。

【讨论】：