Accéder au contrôleur d'un élément

Il est parfois pratique, voire indispensable de vouloir accéder au contrôleur et au viewModel d'un élément. Par exemple, un élément parent voudrait modifier une propriété du viewModel de ses enfants. Imaginons un élément parent qui voudrait configurer un attribut odd ou even de ses enfants en alternance. Nous allons utiliser pour ça le décorateur @dynamicOptions qui va rendre public le contrôleur de l'élément :

import {dynamicOptions, inlineView} from 'aurelia-framework';

@dynamicOptions()
@inlineView(`
<template>  
  <p
    class="${type}">
    <slot></slot>
  </p>
</template>  
`)
export class Child {}  
import {inlineView, inject} from 'aurelia-framework';

@dynamicOptions()
@inlineView(`
<template>  
  <slot></slot>
</template>  
`)
@nject(Element)
export class Parent {  
  constructor(element) {
    this.element = element;
  }

  attached() {
    const children = this.element.querySelectorAll('child');
    for (const key in Array.from(children)) {
      children[key].au.child.viewModel.type = key % 2 === 0 ? 'even' : 'odd';
    } 
  }
}
<parent>  
  <child>Hello World</child>
  <child>Salut Monde</child>
  <child>Hola Mundo</child>
  <child>こんにちは世界</child>
</parent>  

Nous aurons ainsi une liste de paragraphe dont la classe sera en alternance odd ou even.

dynamicOptions donne donc accès à une nouvelle propriété au disponible dans l'élément qui est un objet contenant tous les contrôleurs du dit élément et chacun dispose du viewModel. On peut donc mettre à jour une propriété du viewModel ou appeler une méthode du contrôleur.

Hadrien Lanneau

Développeur de guichet, expert ESNext pile complète

Toulouse, France https://hadrien.eu

Subscribe to Aurelia Framework pour les frenchies

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!