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.