Attacher une fonction à un custom element avec Aurelia

La doc est assez pauvre sur le sujet mais j'ai réussi à chopper l'info sur gitter. Voici comment attacher une fonction en tant qu'attribut d'un custom element. Pour savoir de quoi je parle, voici l'équivalent avec AngularJS :

<my-element  
  do-something="doSomething(data)"></my-element>

Avec AngularJS, on spécifie cet attribut dans le scope avec le caractère "&".

Bon, alors ça se passe comment avec Aurelia ? Bah à peu près pareil. Dans le template, on va utiliser le mot clé call :

<my-element  
  do-something.call="doSomething($event)"></my-element>

Pour le moment, je n'ai pas trouvé d'autre moyen que de passer un attribut $event, alors on va faire comme ça pour le moment. Je mettrais à jour l'article si je trouve une meilleure façon de faire.

Et dans la classe du custom element, il ne nous reste plus qu'à executer cette méthode au bon endroit :

import {bindable} from 'aurelia-framework';

export class MyElement {  
  @bindable doSomething = null;

  callDoSomething () {
    this.doSomething('coin');
  }
}

Ainsi, dans le contrôleur parent, la méthode doSomething aura accès à la donnée envoyée :

export class App {  
  doSomething (data) {
    console.log(data);
  }
}

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