Aureliaの値コンバータのすべてのフィルタを表示

Question

現時点では、私のアプリは現在練習を表示し、選択肢を使用して筋肉グループでフィルタリングしています。私は最初にそれらのすべてを表示する方法を理解するのに苦労しています。

アプリが読み込まれるとすぐに筋肉グループによってフィルタリングされます。または、値が '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); 
     }); 
    } 
} 

「すべて」オプションを選択した場合、どのようにすべてのデータを表示できますか？また、すべてのデータを検索できるように、送信時にすべてのフィルタをクリアする必要がある検索機能もあります。

ありがとうございます。

Answer 1

あなたは自分の価値コンバータにシンプルifステートメントを使用することができます：ここにあなたが（等号を使用して）任意のプロパティにフィルタリングするために使用できる汎用FilterValueConverterだ、代替案として

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

---

：

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>