Composant récursifs

Avec Aurelia, c'est extrêmement simple de réaliser des composants récursifs qui s'appellent eux même dans leur template. Imaginons que nous ayons une hiérarchie d'objets avec des enfants et que nous voudrions les afficher sous forme de tree view. Voici comment cela serait implémenté.

Commençons par préparer les données :

app.js

export class App {  
  items = [{
    name: 'foo',
    items: [{
      name: 'foo1',
      items: [{
        name: 'foo11'
      }]
    }, {
      name: 'foo2',
      items: [{
        name: 'foo21'
      }, {
        name: 'foo22',
        items: [{
          name: 'foo221'
        }]
      }]
    }]
  }, {
    name: 'bar'
  }];
}

Voilà, un tableau d'objets qui contiennent eux même un tableau d'objet dans une profondeur infinie. Nous voudrions donc afficher toutes ces données dans des ul/li imbriqués. Nous allons pour cela spécifier un composant récursif.

recursive-item.js

import {bindable} from 'aurelia-framework';

export class RecursiveItemCustomElement {  
  @bindable item;
}

recursive-item.html

<template>  
${item.name}
<ul  
  if.bind="item.items">
  <li
    repeat.for="subitem of item.items>
    <recursive-item
      item.bind="subitem"></recursive-item>
  </li>
</ul>  
</template>  

Et dans notre App :

app.html

<template>  
<require  
  from="./recursive-item"></require>
<ul>  
  <li
    repeat.for="item of items>
    <recursive-item
      item.bind="item"></recursive-item>
  </li>
</ul>  
</template>  

Et c'est tout !

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!