C’est une excellente fonctionnalité, mais que faire si le contenu d’une section personnalisée de la barre latérale doit être créé par programmation ? J’ai réussi cela d’une manière similaire à @Olya_Fursova ci-dessus, seulement le contenu est généré en interrogeant l’API, puis en rendant des liens, certains vers des catégories et d’autres directement vers certains sujets. Deux problèmes que j’ai rencontrés sont :
Si la barre latérale est masquée lors du rendu initial de la page, le contenu dynamique ne sera pas affiché car le conteneur de la barre latérale n’est pas présent. De plus, lorsque la barre latérale est initialement affichée puis réduite et affichée à nouveau, le contenu dynamique disparaît car le conteneur de la barre latérale est re-rendu sans que la logique personnalisée ne soit exécutée. Question : y a-t-il un moyen de s’accrocher au processus de rendu de la barre latérale pour exécuter mon code personnalisé chaque fois que la barre latérale est affichée ?
Lorsque les liens que j’ajoute à la barre latérale par programmation sont cliqués, la page entière est actualisée. Question : y a-t-il un moyen d’empêcher une actualisation complète de la page lorsqu’un de mes liens personnalisés dans la barre latérale est cliqué ?
Ce serait vraiment fantastique s’il existait un moyen de modifier la barre latérale par programmation !
Ceci est marqué comme expérimental, mais il devrait être sûr à utiliser (nous l’utilisons pour ajouter du contenu de chat à la barre latérale lorsqu’il est activé, par exemple).
Cela semble intéressant, merci ! Il faudra du temps pour bien comprendre, par exemple, je ne saisis pas encore bien le routage. De plus, il semble que les liens dans une section ne puissent être qu’une liste plate, n’est-ce pas ? Ce que j’essaie d’accomplir actuellement est quelque chose comme ceci, c’est-à-dire un niveau d’indentation :
Non, nous n’avons pas intégré d’indentation dans la barre latérale par défaut… mais tant que vous pouvez organiser vos sections dans l’ordre souhaité avec l’API, je pense que l’indentation peut probablement être gérée avec le style CSS ?
Après avoir examiné la question un peu plus en profondeur, je suis convaincu que cela fonctionnera, oui ! Mon défi maintenant est que la liste des liens est dynamique et peut potentiellement changer à chaque changement de page. Mon approche naïve consistant à appeler api.addSidebarSection à partir de api.onPageChange ne fonctionne pas car (a) la barre latérale n’est rafraîchie que lorsqu’elle est re-rendue en la cachant et en la montrant à nouveau et (b) les sections sont répétées car api.addSidebarSection ne se soucie pas si la clé de nom est réutilisée.
Y a-t-il une chance que je puisse obtenir une section de barre latérale mise à jour à chaque transition de page avec la nouvelle API ?
Vous pouvez examiner comment le plugin de chat est intégré à la barre latérale :
Dans ce cas, l’état des liens est conservé dans l’objet de service et chaque fois que l’état est modifié, la barre latérale est mise à jour :
Une solution potentielle consisterait à s’abonner à l’événement de changement de page et à mettre à jour les liens. Le pseudocode pourrait ressembler à ceci :
import { tracked } from "@glimmer/tracking";
api.addSidebarSection(
(BaseCustomSidebarSection, BaseCustomSidebarSectionLink) => {
const TestSectionLink = class extends BaseCustomSidebarSectionLink {
// définissez vos propriétés de lien personnalisées ici
};
const SidebarTestSection = class extends BaseCustomSidebarSection {
@tracked links = [];
constructor() {
super(...arguments);
this.#updateLinks();
this.onAppEvent("page:changed", () => this.#updateLinks());
}
get newLinksArray() {
// liste des liens basée sur l'URL actuelle
}
#updateLinks() {
this.links = this.newLinksArray.map(
(link) =>
new TestSectionLink({
link,
})
);
}
get sectionLinks() {
return this.links;
}
};
return SidebarTestSection;
}
);
