Meteor es una plataforma de JavaScript de pila completa que se utiliza para desarrollar aplicaciones web y móviles modernas. Meteor tiene un conjunto de características que son útiles para crear una aplicación web o móvil receptiva y reactiva utilizando JavaScript o diferentes paquetes disponibles en el marco. Se utiliza para crear aplicaciones reactivas de cliente conectado.
En las plantillas Meteor se utilizan tres etiquetas de nivel superior. La cabeza y el cuerpo son los dos primeros. Estas etiquetas tienen la misma funcionalidad que las etiquetas HTML convencionales. Plantilla es la tercera etiqueta en la que vinculamos HTML y JavaScript.
La misma plantilla puede aparecer en un sitio web varias veces usando {{> templatename }}, y estas instancias se denominan instancias de plantilla. Las instancias de plantilla tienen un ciclo de vida en el que se producen, se colocan en el documento y luego se eliminan y eliminan. Meteor se encarga de estos pasos por usted, incluida la identificación de cuándo se debe limpiar una instancia de plantilla después de que se haya eliminado o cambiado. Cuando una instancia de plantilla está en el documento, puede asociarle datos y acceder a sus Nodes DOM.
Sintaxis:
<template name="gfg">
...
</template>
Crear una aplicación Meteor y un módulo de importación:
Paso 1: Cree una aplicación Meteor usando el siguiente comando.
meteor create foldername
Paso 2: después de crear la carpeta de su proyecto, es decir, el nombre de la carpeta, muévase a ella con el siguiente comando.
cd foldername
Paso 3: Importe el módulo de plantilla desde ‘meteor/templating’
import { Template } from 'meteor/templating'
Estructura del proyecto : Se verá como lo siguiente.
Paso para ejecutar la aplicación: ejecute la aplicación desde el directorio raíz del proyecto, utilizando el siguiente comando.
meteor
Ejemplo: Este es el ejemplo básico que muestra cómo usar el componente Plantilla.
Main.html
<head>
<title>gfg</title>
</head>
<body>
<h1 class="heading">GeeksforGeeks</h1>
{{> frameList}}
</body>
<template name="frameList">
<h3>JavaScript Frameworks</h3>
<ul>
{{#each frameworks}}
{{> framework}}
{{/each}}
</ul>
</template>
<template name="framework">
<li>{{list}}</li>
</template>
Main.js
import { Template } from 'meteor/templating';
import './main.html';
Template.frameList.helpers({
frameworks: function () {
return [
{ list: "Meteor" },
{ list: "Vue" },
{ list: "Next" },
{ list: "Angular" },
]
}
});
Producción:
Referencia: https://docs.meteor.com/api/templates.html
Publicación traducida automáticamente
Artículo escrito por GeeksforGeeks-1 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA