Affichage conditionnel des éléments du sous-menu pour le menu déroulant dans Aurelia

Question

Pour le menu déroulant que je crée dans Aurelia, je veux vérifier si l'un des éléments LI affichés a un élément de sous-menu et si oui, afficher ce sous-menu et faire que cliquable au lieu de l'élément principal. Comme je n'utilise pas de routeur, la plupart des questions/réponses ne correspondent pas nécessairement à la situation.

Voici mon html actuel:

<ul class="myDropdown" id="dropdownMenu"> 
    <li class="myDropdown_menu-option" repeat.for="item of config.items" click.trigger="clickHandler(item.action)"> 
    <i class="fa fa-user"></i> ${item.label} 
    <ul class="myDropdown__submenu-container"> 
     <li class="myDropdown__menu-option"> 
     <span> 
      <i class="fa fa-user"></i> Subitem Label 
     </span> 
     </li> 
    </ul> 
    </li> 
</ul> 

Et voici ma position actuelle JS (moins quelques éléments non apparentés):

export class Dropdown { 
    parentContext; 
    //config.items = [{ label:String, click:Function }] 
    @bindable config = { 
    items: [], 
}; 

clickHandler(action) { 
    action.call(super.parentContext); 
} 

Je suppose que les deux choses que je suis désireux de comprendre sont :

• Étant donné que les éléments seront définis par la personne qui utilise ce composant, les itinéraires ne peuvent pas être définis. Donc, je me demande si/comment j'ai besoin de définir des sous-éléments afin qu'ils puissent être consultés, répétés et affichés s'ils existent? Aurais-je simplement ajouter à mon commentaire comment ils devraient inclure des sous-éléments? Quelque chose comme: config.items = [{ label:String, click: Function, subitem:[{label:String, click: Function}] }]
• Si je veux configurer une répétition pour tous les sous-éléments (s'ils existent), comment puis-je accéder à ces éléments? Serait-ce quelque chose comme repeat.for="subitem.item of config.items.subitem"? Je suis à peu près sûr que c'est incorrect, donc tout point de vue serait génial.

Merci pour tous les conseils que vous pouvez fournir!

MISE À JOUR: Avec l'aide d'une autre personne, j'ai pu faire quelques changements pour obtenir les sous-éléments à se manifester si elles existent:

<ul class="myDropdown" id="dropdownMenu"> 
    <li class="myDropdown__menu-option" repeat.for="item of config.items" click.trigger="clickHandler(item.action)"> 
    <i class="fa fa-user"></i> ${item.label} 
    <ul class="myDropdown__submenu-container"> 
     <li class="myDropdown__menu-option" repeat.for="subitem of items.subitems" click.trigger="clickHandler(subitems.action)"> 
     <span> 
      <i class="fa fa-user"></i> ${subitem.label} 
     </span> 
     </li> 
    </ul> 
    </li> 
</ul> 

Et je suis remplissage l'objet config comme ça dans mon application fichier .js:

config = { 
    items: [ 
    { label: 'Item 1', click:()=>{}}, 
    { label: 'Item 2', click:()=>{}, 
     subitems: [{ label: 'Subitem 2', click:()=>{} }] 
    } 
    ] 
}; 

donc je suppose que la dernière chose que je me demande est alors comment faire l'option de clic conditionnel sur s'il y a un sous-élément ou non. Par exemple, s'il n'y a pas de sous-élément, l'élément doit être cliquable, mais s'il existe un sous-élément, seul le sous-élément doit être cliquable. Le click.trigger doit-il être appelé différemment ou sur un élément différent afin qu'une condition puisse être appliquée?

Answer 1

Je recommanderais contre une fonction de clic dans votre objet, de sorte que vous puissiez séparer le "modèle" de la logique.

Utilisez clickHandler dans la classe Dropdown pour décider quoi faire en fonction de l'élément sur lequel vous avez cliqué. par exemple.

html

<li class="myDropdown__menu-option" repeat.for="item of config.items" click.delegate="clickHandler(item)"> 

viewmodel:

clickHandler(item) { 
    if (item.subitems && item.subitems.length > 0) { 
     // do something 
    } 
    // by default if there are no subitems, nothing is done 
} 

Vous pourriez avoir un gestionnaire de clic séparé pour les sous-éléments ou d'utiliser le même si l'action est similaire - qui dépend de vos spécificités .