Tablica filtrów w widoku aurelia

Question

Używam aurelia i chcę filtrować kolekcję (tablicę) w widoku, a nie w widoku modelu.

Staram następującą składnię, aby to zrobić:

<div class="col-sm-7 col-md-7 col-lg-7 ${errors.filter(function(err){return err.Key==='car.Model';}).length >0? 'alert alert-danger' :''}"> 
      <span repeat.for="error of errors"> 
       <span if.bind="error.Key==='car.Model'"> 
        ${error.Message} 
       </span> 
      </span> 
</div> 

i otrzymuję następujący błąd w konsoli przeglądarki:

Error: Parser Error: Missing expected) at column 28 in [errors.filter(function(err){return err.Key==='car.Model';].

Jest to możliwe w angularjs następująco:

<div class="small-7 medium-7 large-7 columns end"> 
     <span class="error" ng-repeat="error in errors | filter:{ Key: 'car.Model'}"> 
      <span class="error-message"> 
       {{error.Message}} 
      </span> 
     </span> 
    </div> 

Czy coś podobnego również w Aurelia?

Chciałbym również wiedzieć, w jaki sposób kolekcja/tablica może być filtrowana w repeat.for w aurelia (podobna do ng-repeat). Próbowałem użyć funkcji filtra w podobny sposób, ale to też nie zadziałało i dostałem podobny błąd.

Answer 1

To trochę krępujące. Ale po drobnych badaniach (które powinienem był zrobić wcześniej: P) Mam odpowiedź.

Można to zrobić za pomocą funkcji ValueConverter, jak pokazano poniżej: http://jdanyow.github.io/aurelia-converters-sample/.

Myślę, że to całkiem fajne.

Teraz mój kod wygląda następująco:

<div class="col-sm-7 col-md-7 col-lg-7 alert alert-danger" if.bind="errors | hasPropertyValue:'Key':'car.Model'"> 
    <span repeat.for="error of errors | filterOnProperty:'Key':'car.Model'"> 
     <span> 
      ${error.Message} 
     </span> 
    </span> 
</div> 

I zdefiniowano kilka valueconverters w maszynopisie (valueconverters.ts):

export class FilterOnPropertyValueConverter { 
toView(array: {}[], property: string, exp: string) { 

    if (array === undefined || array === null || property === undefined || exp === undefined) { 
     return array; 
    } 
    return array.filter((item) => item[property].toLowerCase().indexOf(exp.toLowerCase()) > -1); 
} 
} 

export class HasPropertyValueValueConverter { 
toView(array: {}[], property: string, exp: string) { 

    if (array === undefined || array === null || property === undefined || exp === undefined) { 
     return false; 
    } 
    return array.filter((item) => item[property].toLowerCase().indexOf(exp.toLowerCase()) > -1).length > 0; 
} 
} 

I wreszcie importowane są moim zdaniem: <import from="yourPath/valueconverters"></import>

Answer 2

Dobrze się nauczyć, jak używać Aurelia w podobny sposób. Co powiesz na to, aby liczba przefiltrowanych list była taka jak następujący kod kątowy 1?

<div class="small-7 medium-7 large-7 columns end"> 
     <span class="error" ng-repeat="error in filtered = (errors | filter:{ Key: > 'car.Model'})"> 
      <span class="error-message"> 
       {{error.Message}} 
      </span> 
     </span> 
    </div> 
      <div class="row text-center" ng-if="errors.length>0"> 
       Total records: {{filtered.length}} 
      </div>