Meteoro - Blaze

Blaze é um pacote Meteor para construir modelos reativos ao vivo.

Método de Renderização

Este método é usado para renderizar modelos no DOM. Primeiro, vamos criarmyNewTemplateque será processado. Nós também adicionaremosmyContainer, que será usado como um elemento pai, então o render método sabe onde renderizar nosso modelo.

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 seguir, criaremos uma função de renderização que receberá dois argumentos. O primeiro é um modelo que será renderizado e o segundo é um elemento pai que mencionamos acima.

meteorApp.js

Meteor.startup(function () {

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

Renderizar com dados

Se você precisar passar alguns dados reativamente, você pode usar renderWithDatamétodo. O HTML será exatamente o mesmo do exemplo 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 adicionar nossos dados como um segundo argumento em Meteor.renderWithDatamétodo. Os outros dois argumentos são iguais aos do exemplo anterior. Neste exemplo, nossos dados são uma função que registrará algum 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);
   }
});

Método de remoção

Podemos adicionar 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>

Neste exemplo, estamos renderizando o modelo que será removido após três segundos. Observe oBlaze.Remove método que estamos usando para remover o modelo.

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

A tabela a seguir mostra os outros métodos que podem ser usados.

Sr. Não.	Método e detalhes
1	Blaze.getData([elementOrView]) Usado para recuperar dados do elemento de renderização.
2	Blaze.toHTML(templateOrView) Usado para renderizar templates ou visualizações para a string.
3	Blaze.toHTMLWithData(templateOrView, data) Usado para renderizar templates ou visualizações para a string com dados adicionais.
4	new Blaze.View([name], renderFunction) Usado para criar uma nova parte reativa Blaze do DOM.
5	Blaze.currentView Usado para obter a visualização atual.
6	Blaze.getView([element]) Usado para obter a visualização atual.
7	Blaze.With(data, contentFunc) Usado para construir uma visão que renderiza algum conteúdo com contexto.
8	Blaze.If(conditionFunc, contentFunc, [elseFunc]) Usado para construir uma visualização que renderiza algum conteúdo condicional.
9	Blaze.Unless(conditionFunc, contentFunc, [elseFunc]) Usado para construir uma visão que renderiza algum conteúdo condicional (invertido Blaze.if)
10	Blaze.Each(argFunc, contentFunc, [elseFunc]) Usado para construir uma visão que renderiza contentFunct para cada item.
11	new Blaze.Template([viewName], renderFunction) Usado para construir uma nova visualização Blaze com nome e conteúdo.
12	Blaze.isTemplate(value) Usado para retornar true, se o valor for um objeto de modelo.

↰ Previous page Next page ↱