Meteor - Modelli
I modelli Meteor utilizzano tre tag di primo livello. I primi due lo sonohead e body. Questi tag svolgono le stesse funzioni del normale HTML. Il terzo tag ètemplate. Questo è il luogo in cui colleghiamo HTML a JavaScript.
Modello semplice
L'esempio seguente mostra come funziona. Stiamo creando un modello conname = "myParagraph"attributo. Nostrotemplate viene creato sotto il tag bodyelemento, tuttavia, dobbiamo includerlo prima che venga visualizzato sullo schermo. Possiamo farlo usando{{> myParagraph}}sintassi. Nel nostro modello, stiamo usando doppie parentesi graffe({{text}}). Questo è il linguaggio per template meteor chiamatoSpacebars.
Nel nostro file JavaScript, stiamo impostando Template.myParagraph.helpers({})metodo che sarà la nostra connessione al nostro modello. Stiamo solo usandotext helper in questo esempio.
meteorApp.html
<head>
<title>meteorApp</title>
</head>
<body>
<h1>Header</h1>
{{> myParagraph}}
</body>
<template name = "myParagraph">
<p>{{text}}</p>
</template>
meteorApp.js
if (Meteor.isClient) {
// This code only runs on the client
Template.myParagraph.helpers({
text: 'This is paragraph...'
});
}
Dopo aver salvato le modifiche, il seguente sarà l'output:
Modello di blocco
Nell'esempio seguente, stiamo usando {{#each paragraphs}} per iterare sul file paragraphs matrice e modello di ritorno name = "paragraph" per ogni valore.
meteorApp.html
<head>
<title>meteorApp</title>
</head>
<body>
<div>
{{#each paragraphs}}
{{> paragraph}}
{{/each}}
</div>
</body>
<template name = "paragraph">
<p>{{text}}</p>
</template>
Dobbiamo creare paragraphsaiutante. Questo sarà un array con cinque valori di testo.
meteorApp.js
if (Meteor.isClient) {
// This code only runs on the client
Template.body.helpers({
paragraphs: [
{ text: "This is paragraph 1..." },
{ text: "This is paragraph 2..." },
{ text: "This is paragraph 3..." },
{ text: "This is paragraph 4..." },
{ text: "This is paragraph 5..." }
]
});
}
Ora possiamo vedere cinque paragrafi sullo schermo.