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.