Учебники

Метеор — Пламя

Январь 30, 2019

Blaze — это пакет Meteor для создания живых реактивных шаблонов.

Метод рендеринга

Этот метод используется для рендеринга шаблонов в DOM. Сначала мы создадим myNewTemplate, который будет отображаться. Мы также добавим myContainer , который будет использоваться в качестве родительского элемента, чтобы метод render знал, где визуализировать наш шаблон.

meteorApp.html 

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

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

Далее мы создадим функцию рендера, которая будет принимать два аргумента. Первый — это шаблон, который будет отображаться, а второй — родительский элемент, который мы упоминали выше.

meteorApp.js 

Meteor.startup(function () {

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

Метеоритный Blaze Render

Визуализация с данными

Если вам нужно передать некоторые данные реактивно, вы можете использовать метод renderWithData . HTML будет точно таким же, как в предыдущем примере.

meteorApp.html 

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

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

Мы можем добавить наши данные в качестве второго аргумента в методе Meteor.renderWithData . Два других аргумента такие же, как в предыдущем примере. В этом примере наши данные — это функция, которая будет регистрировать некоторый текст.

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

Meteor Blaze с данными

Метод удаления

Мы можем добавить метод удаления .

meteorApp.html 

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

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

В этом примере мы визуализируем шаблон, который будет удален через три секунды. Обратите внимание на метод Blaze.Remove, который мы используем для удаления шаблона.

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

В следующей таблице показаны другие методы, которые можно использовать.

Blaze.getData ([elementOrView])

Используется для извлечения данных из элемента рендеринга.

Blaze.toHTML (templateOrView)

Используется для рендеринга шаблонов или представлений в строку.

Blaze.toHTMLWithData (templateOrView, data)

Используется для рендеринга шаблонов или представлений в строку с дополнительными данными.

новый Blaze.View ([name], renderFunction)

Используется для создания новой реактивной части Blaze DOM.

Blaze.currentView

Используется для получения текущего представления.

Blaze.getView ([элемент])

Используется для получения текущего представления.

Blaze.With (data, contentFunc)

Используется для построения представления, которое отображает некоторый контент с контекстом.

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

Используется для построения представления, которое отображает некоторый условный контент.

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

Используется для построения представления, которое отображает некоторый условный контент (инвертированный Blaze.if ).

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

Используется для создания представления, которое отображает contentFunct для каждого элемента.

новый Blaze.Template ([viewName], renderFunction)

Используется для создания нового представления Blaze с именем и содержанием.

Blaze.isTemplate (значение)

Используется для возврата true, если значение является шаблоном объекта.

42
Share: