Meteor - Modèles

Les modèles Meteor utilisent trois balises de niveau supérieur. Les deux premiers sonthead et body. Ces balises remplissent les mêmes fonctions que dans le HTML normal. La troisième balise esttemplate. C'est ici que nous connectons HTML à JavaScript.

Modèle simple

L'exemple suivant montre comment cela fonctionne. Nous créons un modèle avecname = "myParagraph"attribut. Notretemplate la balise est créée sous le bodyélément, cependant, nous devons l'inclure avant qu'il ne soit rendu à l'écran. Nous pouvons le faire en utilisant{{> myParagraph}}syntaxe. Dans notre modèle, nous utilisons des doubles accolades({{text}}). C'est un langage de modèle de météore appeléSpacebars.

Dans notre fichier JavaScript, nous définissons Template.myParagraph.helpers({})méthode qui sera notre connexion à notre modèle. Nous n'utilisons quetext helper dans cet exemple.

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...'
   });
}

Après avoir enregistré les modifications, voici la sortie -

Modèle de bloc

Dans l'exemple suivant, nous utilisons {{#each paragraphs}} pour parcourir le paragraphs tableau et modèle de retour name = "paragraph" pour chaque valeur.

meteorApp.html

<head>
   <title>meteorApp</title>
</head>
 
<body>
   <div>
      {{#each paragraphs}}
         {{> paragraph}}
      {{/each}}
   </div>
</body>
 
<template name = "paragraph">
   <p>{{text}}</p>
</template>

Nous devons créer paragraphsassistant. Ce sera un tableau avec cinq valeurs de texte.

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..." }
      ]
   });
}

Maintenant, nous pouvons voir cinq paragraphes à l'écran.