Meteorito - Plantillas

Las plantillas de meteoritos utilizan tres etiquetas de nivel superior. Los dos primeros sonhead y body. Estas etiquetas realizan las mismas funciones que en HTML normal. La tercera etiqueta estemplate. Este es el lugar donde conectamos HTML a JavaScript.

Plantilla simple

El siguiente ejemplo muestra cómo funciona esto. Estamos creando una plantilla conname = "myParagraph"atributo. Nuestratemplate La etiqueta se crea debajo de la bodyelemento, sin embargo, necesitamos incluirlo antes de que se muestre en la pantalla. Podemos hacerlo usando{{> myParagraph}}sintaxis. En nuestra plantilla, usamos llaves dobles({{text}}). Este es un lenguaje de plantilla de meteorito llamadoSpacebars.

En nuestro archivo JavaScript, estamos configurando Template.myParagraph.helpers({})método que será nuestra conexión con nuestra plantilla. Solo estamos usandotext helper en este ejemplo.

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

Después de guardar los cambios, lo siguiente será el resultado:

Plantilla de bloque

En el siguiente ejemplo, estamos usando {{#each paragraphs}} para iterar sobre el paragraphs matriz y plantilla de retorno name = "paragraph" para cada valor.

meteorApp.html

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

Necesitamos crear paragraphsayudante. Esta será una matriz con cinco valores de texto.

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

Ahora podemos ver cinco párrafos en la pantalla.