2.4 KiB
id, title, challengeType, forumTopicId, dashedName
| id | title | challengeType | forumTopicId | dashedName |
|---|---|---|---|---|
| 5895f70bf9fc0f352b528e64 | Usare il potere di un Template Engine | 2 | 301567 | use-a-template-engines-powers |
--description--
Una delle maggiori caratteristiche dell'utilizzo di un template engine è essere in grado di passare variabili dal server al file modello prima di renderlo in HTML.
Nel tuo file Pug, sei in grado di usare una variabile facendo riferimento al nome della variabile come #{variable_name} inline con un altro testo su un elemento o usando un segno uguale sull'elemento senza uno spazio come p=variable_name che assegna il valore della variabile al testo dell'elemento p.
Si consiglia vivamente di guardare la sintassi e la struttura di Pug qui sul README di GitHub. Pug utilizza spazi bianchi e tab per mostrare elementi annidati e tagliare sulla quantità di codice necessario per fare un bel sito.
Guardando il nostro file pug 'index.pug' incluso nel tuo progetto, abbiamo usato le variabili title e message.
Per passare quelle variabili dal nostro server, dovrai aggiungere un oggetto come secondo argomento ai tuoi res.render con le variabili e i loro valori. Per esempio, passa questo oggetto impostando le variabili per la tua vista indice: {title: 'Hello', message: 'Please login'}
Dovrebbe assomigliare a: res.render(process.cwd() + '/views/pug/index', {title: 'Hello', message: 'Please login'}); Ora aggiorna la tua pagina e dovresti vedere quei valori renderizzati nella tua vista nel punto corretto come impostato nel tuo file index.pug!
Invia la tua pagina quando pensi di averlo fatto correttamente. Se incontri degli errori, puoi controllare il progetto completato fino a questo punto qui.
--hints--
Il Pug dovrebbe visualizzare correttamente le variabili.
(getUserInput) =>
$.get(getUserInput('url') + '/').then(
(data) => {
assert.match(
data,
/pug-variable("|')>Please login/gi,
'Your projects home page should now be rendered by pug with the projects .pug file unaltered'
);
},
(xhr) => {
throw new Error(xhr.statusText);
}
);
--solutions--
/**
Backend challenges don't need solutions,
because they would need to be tested against a full working project.
Please check our contributing guidelines to learn more.
*/