Questa è un’ottima funzionalità, ma cosa succede se il contenuto di una sezione personalizzata della barra laterale deve essere creato programmaticamente? Ho ottenuto questo risultato in un modo simile a @Olya_Fursova sopra, solo che il contenuto viene generato interrogando l’API e quindi renderizzando link, alcuni a categorie e altri direttamente a determinati argomenti. Due problemi che ho riscontrato sono:
Se la barra laterale è nascosta quando la pagina viene renderizzata inizialmente, il contenuto dinamico non verrà mostrato poiché il contenitore della barra laterale non è presente. Inoltre, quando la barra laterale viene inizialmente mostrata ma poi collassata e mostrata di nuovo, il contenuto dinamico scompare perché il contenitore della barra laterale viene renderizzato nuovamente senza che la logica personalizzata venga eseguita. Domanda: c’è un modo per agganciarsi al processo di rendering della barra laterale per eseguire il mio codice personalizzato ogni volta che la barra laterale viene mostrata?
Quando i link che aggiungo programmaticamente alla barra laterale vengono cliccati, l’intera pagina viene aggiornata. Domanda: c’è un modo per evitare un aggiornamento completo della pagina quando uno dei miei link personalizzati nella barra laterale viene cliccato?
Sarebbe davvero fantastico se ci fosse un modo per modificare la barra laterale programmaticamente!
Questo è contrassegnato come sperimentale ma dovrebbe essere sicuro da usare (lo usiamo per aggiungere contenuti di chat alla barra laterale quando è abilitata, ad esempio)
Sembra interessante, grazie! Ci vorrà un po’ di tempo per capirlo bene, ad esempio, non ho ancora capito bene il routing. Inoltre, sembra che i link in una sezione possano essere solo un elenco piatto, giusto? Quello che sto cercando di ottenere attualmente è qualcosa di simile, cioè un livello di indentazione:
No, non abbiamo creato alcuna rientranza predefinita nella barra laterale… ma finché puoi inserire le tue sezioni nell’ordine desiderato con l’API, penso che la rientranza possa probabilmente essere gestita con lo stile in CSS?
Dopo aver approfondito un po’, sono sicuro che funzionerà, sì! La mia sfida ora è che l’elenco dei collegamenti è dinamico e può potenzialmente cambiare ad ogni cambio di pagina. Il mio approccio ingenuo di chiamare api.addSidebarSection da api.onPageChange non funziona perché (a) la barra laterale viene aggiornata solo quando viene nuovamente renderizzata nascondendola e mostrandola di nuovo e (b) le sezioni vengono ripetute perché api.addSidebarSection non si preoccupa se la chiave del nome viene riutilizzata.
C’è qualche possibilità che io possa ottenere una sezione della barra laterale aggiornata ad ogni transizione di pagina con la nuova API?
Puoi dare un’occhiata a come chat-plugin è integrato con la barra laterale:
In questo caso, lo stato dei collegamenti è mantenuto nell’oggetto service e ogni volta che lo stato viene modificato, la barra laterale viene aggiornata:
Una potenziale soluzione sarebbe sottoscriversi all’evento di cambio pagina e aggiornare i collegamenti. Il pseudocodice potrebbe assomigliare a:
import { tracked } from "@glimmer/tracking";
api.addSidebarSection(
(BaseCustomSidebarSection, BaseCustomSidebarSectionLink) => {
const TestSectionLink = class extends BaseCustomSidebarSectionLink {
// definisci qui le tue proprietà di collegamento personalizzate
};
const SidebarTestSection = class extends BaseCustomSidebarSection {
@tracked links = [];
constructor() {
super(...arguments);
this.#updateLinks();
this.onAppEvent("page:changed", () => this.#updateLinks());
}
get newLinksArray() {
// elenco dei collegamenti basato sull'URL corrente
}
#updateLinks() {
this.links = this.newLinksArray.map(
(link) =>
new TestSectionLink({
link,
})
);
}
get sectionLinks() {
return this.links;
}
};
return SidebarTestSection;
}
);
