目前我的应用程序当前显示练习,然后使用选择选项通过肌肉群过滤它们。我很难理解如何最初显示所有这些内容。
一旦应用程序加载,它就已经被肌肉群过滤,或者如果它被过滤了所有'全部'它没有显示任何内容,因为这不是我的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);
});
}
}
当全部&#39;全部数据显示时,如何显示所有数据?选项被选中?我还有一个搜索功能,需要在提交时清除所有过滤器,以便搜索所有数据。
提前感谢。
答案 0 :(得分:2)
您可以在值转换器中使用简单的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>