Filtres avec Aurelia

Les filtres sont un moyen de modifier une valeur directement depuis une vue. Ça marche de la même façon que sur Angular : le nom du filtre est chainé à la valeur via un pipe. Ainsi :

<require from="filters/date-format"></require>  
<p>Created: ${account.createdAt|dateFormat:'LL'}</p>  

affichera "Created: July 31, 2014".

Un filtre chez Aurelia est un Value Converter. Voici donc le dateFormat value converter :

import moment from 'moment/moment';

export class DateFormatValueConverter {  
  toView (date, format) {
    if (!date instanceof Date) {
      date = new Date(date);
    }
    return moment(date).format(format);
  }
}

Il suffit de suffixer sa classe de "ValueConverter" pour qu'elle soit considérée comme telle.
Un ValueConverter dispose d'un constructor pour initialiser les éventuelles valeurs par défaut mais surtout d'une méthode toView(). C'est cette méthode qui va être appellée lors de l'application du filtre. Elle prendra en premier paramètre la valeur à gauche du pipe, et en paramètres suivants, les paramètres placés après les deux points. Ainsi dans notre exemple plus haut, le premier paramètre sera l'objet Date, et le suivant sera le format. Cette méthode doit renvoyer un string.

Hadrien

Hi, I'm a french Javascript Lead Developer, Web Architect from Toulouse, France. I've worked for 12 years for many projects with YUI, AngularJS, Aurelia.io and now React and React native.

Toulouse, France https://hadrien.eu