显示Aurelia值转换器上的所有过滤器

Show all filter on Aurelia value converter

本文关键字：过滤器 Aurelia 转换器 显示      更新时间：2023-09-26

目前，我的应用程序显示锻炼，然后使用选择选项按肌肉组筛选。我很难理解如何一开始就展示所有这些。

一旦加载应用程序，它就已经被肌肉组过滤了，或者如果它被值"all"过滤了，它就不会显示任何内容，因为这不是我的JSON中指定的肌肉组。它的组织方式如下：

选择选项调用过滤器（肌肉过滤器只是所有肌肉组的一个数组）

<div class="form-group">
   <label for="muscle">Show:</label>
      <select id="muscle" ref="muscle">
      <option value="all">All</option>
      <option repeat.for="muscle of muscleFilters" value.bind="muscle">${muscle}</option>
   </select>
</div>

显示

<div class="col-sm-6 col-md-3" repeat.for="exercise of exercises | sortMuscle:muscle.value">
${exercise.title}
</div>

分拣功能

export class SortMuscleValueConverter {
  toView(array, propertyName) {
    return array
      .slice(0).filter(function (i) {
          return (i.muscle === propertyName);
      });
  }
}

选择"全部"选项时，如何显示所有数据？我还有一个搜索功能，它需要在提交时清除所有过滤器，以便搜索所有数据。

提前谢谢。

您只需在值转换器中使用一个简单的if语句：

// Note: convertor name is misleading - it does filtering, not sorting
export class SortMuscleValueConverter {
  toView(array, propertyName) {
    if (propertyName === 'all') {
      return array;
    }
    // Simplified filter
    return array.filter(i => i.muscle === propertyName);
  }
}

作为替代方案，这里有一个通用的FilterValueConverter，您可以使用它来过滤任何属性（使用相等）：

export class FilterValueConverter {
  toView(array, propertyName, filter) {
    if (!filter) {
      return array;
    }
    return array.filter(item => item[propertyName] === filter);
  }
}

用法：

<!-- option for All needs to have an empty value -->
<option value="">All</option>
<div class="col-sm-6 col-md-3" 
     repeat.for="exercise of exercises | filter:'muscle':muscle.value">
  ${exercise.title}
</div>
相关文章：