Risoluzione dei problemi di rendering
I componenti di Microsoft Graph Toolkit sono altamente personalizzabili. Ciò li rende adatti a molte soluzioni diverse. Se ci si blocca a personalizzare la modalità di visualizzazione dei dati, ecco alcuni suggerimenti per capire cosa potrebbe non essere corretto.
Visualizzazione dei dati disponibili nel modello
I componenti di Microsoft Graph Toolkit mostrano i dati usando i modelli, come illustrato in precedenza in questo modulo. Ogni componente include un set di modelli predefiniti, ma è possibile personalizzarli per abbinarli all'app.
Quando si personalizzano i modelli, il problema più comune è fare riferimento ai dati associati al modello in modo errato. Se si fa riferimento a una proprietà inesistente nel modello, il componente non visualizzerà nulla. Se non si visualizzano i dati previsti, il punto di partenza migliore è esaminare i dati associati al modello. Per farlo, aggiungere {{ this }} al modello.
<mgt-agenda date="June 28, 2023" days="3" group-by-day>
<template>{{ this }}</template>
</mgt-agenda>
L'esempio mostra tutti i dati associati al modello nell'app Web.
Se si lavora su set di dati complesso, analizzare i dati direttamente nel browser non è pratico. Al contrario, è possibile registrarli nella console negli strumenti di sviluppo del browser, dove è possibile esplorarli come oggetto. Per farlo, usare {{ console.log(this) }}.
<mgt-agenda date="June 28, 2023" days="3" group-by-day>
<template>{{ console.log(this) }}</template>
</mgt-agenda>
L'esempio mostra la registrazione di tutti i dati associati al modello nella console.
Nei modelli dei componenti è possibile usare qualsiasi funzione JavaScript tra {{ }}. In questo modo, non ci si limita a visualizzare i dati nel browser o a registrarli nella console.
Altro suggerimento: i nomi delle proprietà dei dati associati al modello fanno distinzione tra maiuscole e minuscole. Se nel componente non si visualizzano i dati previsti, verificare che tutti i nomi delle proprietà siano digitati correttamente.
Si sta usando il modello corretto?
Alcuni componenti di Microsoft Graph Toolkit offrono più modelli da personalizzare. Il modello da usare viene scelto con l'attributo data-type.
<mgt-agenda date="June 28, 2023" days="3" group-by-day>
<template data-type="event">{{ console.log(this) }}</template>
</mgt-agenda>
Quando non si specifica l'attributo data-type, il componente usa il modello predefinito.
A ogni modello è associata una struttura di dati diversa. Quando si passa da un modello all'altro, è necessario aggiornare il contenuto del modello in modo che faccia riferimento correttamente al set di dati disponibile.
È possibile trovare i modelli disponibili e gli elementi offerti nella documentazione di ogni componente. Mettiamo ora in pratica alcune di queste tecniche di debug.