Meteoro - Blaze

Blaze es un paquete Meteor para crear plantillas reactivas en vivo.

Método de renderizado

Este método se utiliza para representar plantillas en el DOM. Primero, crearemosmyNewTemplateque se rendirá. También agregaremosmyContainer, que se utilizará como elemento padre, por lo que render El método sabe dónde renderizar nuestra plantilla.

meteorApp.html

<head>
   <title>meteorApp</title>
</head>
 
<body>
   <div id = "myContainer">
   </div>
</body>

<template name = "myNewTemplate">
   <p>Text from my new template...</p>
</template>

A continuación, crearemos una función de renderización que tomará dos argumentos. El primero es una plantilla que se renderizará y el segundo es un elemento padre que mencionamos anteriormente.

meteorApp.js

Meteor.startup(function () {

   if(Meteor.isClient) {
      var myNewTemplate = Template.myNewTemplate;
      var myContainer = document.getElementById('myContainer');
      Blaze.render(myNewTemplate, myContainer);
   }
});

Renderizar con datos

Si necesita pasar algunos datos de forma reactiva, puede usar renderWithDatamétodo. El HTML será exactamente el mismo que en el ejemplo anterior.

meteorApp.html

<head>
   <title>meteorApp</title>
</head>
 
<body>
   <div id = "myContainer">
   </div>
</body>

<template name = "myNewTemplate">
   <p>Text from my new template...</p>
</template>

Podemos agregar nuestros datos como un segundo argumento en Meteor.renderWithDatamétodo. Los otros dos argumentos son los mismos que en el ejemplo anterior. En este ejemplo, nuestros datos son una función que registrará texto.

meteorApp.js

Meteor.startup(function () {

   if(Meteor.isClient) {
      var myNewTemplate = Template.myNewTemplate;
		
      var myData = function() {
         console.log('Log from the data object...')
      }

      var myContainer = document.getElementById('myContainer');
      Blaze.renderWithData(myNewTemplate, myData, myContainer);
   }
});

Eliminar método

Podemos agregar remove método.

meteorApp.html

<head>
   <title>meteorApp</title>
</head>
 
<body>
   <div id = "myContainer">
   </div>
</body>

<template name = "myNewTemplate">
   <p>Text from my new template...</p>
</template>

En este ejemplo, estamos renderizando la plantilla que se eliminará después de tres segundos. Observe laBlaze.Remove método que estamos usando para eliminar la plantilla.

meteorApp.js

Meteor.startup(function () {

   if(Meteor.isClient) {
      var myNewTemplate = Template.myNewTemplate;
      var myContainer = document.getElementById('myContainer');
      var myRenderedTemplate = Blaze.render(myNewTemplate, myContainer);

      Meteor.setTimeout(function() {
         Blaze.remove(myRenderedTemplate);
      }, 3000);
   }
});

La siguiente tabla muestra los otros métodos que se pueden utilizar.

No Señor. Método y detalles
1

Blaze.getData([elementOrView])

Se utiliza para recuperar datos del elemento de representación.
2

Blaze.toHTML(templateOrView)

Se utiliza para representar plantillas o vistas en la cadena.
3

Blaze.toHTMLWithData(templateOrView, data)

Se utiliza para representar plantillas o vistas en la cadena con datos adicionales.
4

new Blaze.View([name], renderFunction)

Se utiliza para crear una nueva parte reactiva de Blaze del DOM.
5

Blaze.currentView

Se utiliza para obtener la vista actual.
6

Blaze.getView([element])

Se utiliza para obtener la vista actual.
7

Blaze.With(data, contentFunc)

Se utiliza para construir una vista que presenta algún contenido con contexto.
8

Blaze.If(conditionFunc, contentFunc, [elseFunc])

Se utiliza para construir una vista que presenta algún contenido condicional.
9

Blaze.Unless(conditionFunc, contentFunc, [elseFunc])

Se usa para construir una vista que presenta algún contenido condicional (invertido Blaze.if).
10

Blaze.Each(argFunc, contentFunc, [elseFunc])

Se usa para construir una vista que renderiza contentFunct para cada artículo.
11

new Blaze.Template([viewName], renderFunction)

Se utiliza para construir una nueva vista de Blaze con nombre y contenido.
12

Blaze.isTemplate(value)

Se usa para devolver verdadero, si el valor es un objeto de plantilla.