如何在 Polymer 中过滤重组数据（dom-重复）

Question

我正在尝试过滤正在重新编制索引的数组。

我想要一个匹配多个属性字符串的输入字段。

<paper-input value="{{val}}" placeholder="Filter Cards"></paper-input>

<template is="dom-repeat" items="[[restructure(data)]]" initial-count="2" filter="{{filter(val, data)}}">
  <card-items data="[[item]]" items="[[item.items]]" links="false"></card-items>
</template>

...

此函数重构要格式化为卡片布局的数据。

returnInvoices(data) {
  let newData = [];
  for (let i = 0; i < data.length; i++) {
    let noOrder = data[i].noOrder;
    if (!newData[noOrder]) {
      newData[noOrder] = {
        idMaster: data[i].idMaster,
        itemId: data[i].itemId,
        description: data[i].description,
        noOrder: noOrder,
        items: []
      };
    }
    newData[noOrder].items.push('{' +
      '"idMaster":"' + data[i].idMaster + '",' +
      '"itemId":"' + data[i].itemId + '"}');
  }
  return newData.filter(val => val).sort((a, b) => {return b.noInvoice - a.noInvoice}) // reindex array
}

我希望此函数用于 return 数组中具有与字符串匹配的属性的对象。

filter(val, data) {
  if (!val) return null;
    else {
      val = val.toLowerCase();
      // not sure what to do here
      // would like to filter on all object properties (from data)
    return data[0];
  }
}

...

例子

if(val == 1) return data[0] & data[1];

if(val == 'Item') return data[0] & data[2];

对于数据数组

let data = [
  {"itemId": "1", "description": "Nice Item", "noOrder": 123},
  {"itemId": "2", "description": "Good Product", "noOrder": 123},
  {"itemId": "3", "description": "Fine Item", "noOrder": 444}
}

...

如何过滤所有 3 个属性的字符串？

如何使用过滤器作为重构的中间函数？

Answer 1

dom-repeat 的 filter property 的文档包括以下语句：

The function should match the sort function passed to Array.filter. Using a filter function has no effect on the underlying items array.

而 Array.filter 是 documented 和

Function is a predicate, to test each element of the array. Return true to keep the element, false otherwise.

因此，如果任何属性与输入匹配，则从您的过滤器函数中 return true，否则 false，例如

filter(item) {
  let val = this.val;
  // if the filter is empty show everything
  if (!val) return true;
  // otherwise see is there a match
  val = val.toLowerCase();
  return // for the "description" use "contains" logic
         (item.description.toLowerCase().includes(val)) ||
         // for the "noOrder" use "starting" logic
         (item.noOrder.toString().indexOf(val) == 0)
       // add matching conditions here ...
}

现在要触发过滤，您必须观察触发过滤的属性，即您的 html 会像

<paper-input value="{{val}}" placeholder="Filter Cards"></paper-input>

<template is="dom-repeat" filter="[[filter]]" observe="val" items="[[restructure(data)]]" initial-count="2">
  <card-items data="[[item]]" items="[[item.items]]" links="false"></card-items>
</template>

顺便说一句，为什么要将项目作为字符串推送到 newData 中？为什么不作为对象，即

newData[noOrder].items.push({
  idMaster: data[i].idMaster,
  itemId: data[i].itemId
});

而且我认为您可以取消 newData.filter(val => val) 步骤...

如何在 Polymer 中过滤重组数据（dom-重复）

How to Filter Restructured Data in Polymer (dom-repeat)

arrays

filter

polymer

polymer-2.x

dom-repeat