Alle Filter anzeigen auf Aurelia Wertkonverter

Question

Im Moment zeigt meine App derzeit Übungen an und filtert sie dann nach Muskelgruppe mit einer Auswahloption. Ich habe Mühe zu verstehen, wie ich sie alle anzeigen kann.

Sobald die App geladen ist, wird sie bereits von einer Muskelgruppe gefiltert, oder wenn sie durch einen Wert von 'Alle' gefiltert wird, wird nichts angezeigt, da dies keine bestimmte Muskelgruppe in meinem JSON ist. Es wird auf die folgende Art und Weise organisiert:

Wählen Sie die Option Filter aufrufen (Muskel Filter ist nur ein Array aus allen Muskelgruppen)

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

Anzeige

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

Sortierfunktion

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

Wie kann ich alle Daten anzeigen, wenn die Option 'Alle' ausgewählt ist? Ich habe auch eine Suchfunktion, die alle Filter löschen muss, wenn sie gesendet wird, so dass sie alle Daten durchsuchen kann.

Vielen Dank im Voraus.

Answer 1

Sie können nur eine einfache if Anweisung in Ihrem Wertwandler verwenden:

// 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); 
    } 
} 

---

Als Alternative, hier ist eine generische FilterValueConverter, die Sie auf jede Eigenschaft filtern können (mit Gleichheit):

export class FilterValueConverter { 
    toView(array, propertyName, filter) { 
    if (!filter) { 
     return array; 
    } 

    return array.filter(item => item[propertyName] === filter); 
    } 
} 

Verbrauch:

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