Шаблоны Meteor используют три тега верхнего уровня. Первые два — голова и тело . Эти теги выполняют те же функции, что и в обычном HTML. Третий тег — это шаблон . Это место, где мы подключаем HTML к JavaScript.
Простой шаблон
Следующий пример показывает, как это работает. Мы создаем шаблон с атрибутом name = «myParagraph» . Наш шаблонный тег создается под элементом body , однако нам нужно включить его до его отображения на экране. Мы можем сделать это, используя синтаксис {{> myParagraph}} . В нашем шаблоне мы используем двойные фигурные скобки ({{text}}) . Это язык шаблонов метеоров, который называется пробелами .
В нашем файле JavaScript мы устанавливаем метод Template.myParagraph.helpers ({}), который будет нашим соединением с нашим шаблоном. Мы используем только текстовый помощник в этом примере.
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...'
});
}
После того, как мы сохраним изменения, последующим будет вывод:
Блок шаблона
В следующем примере мы используем {{#each абзацы}} для итерации по массиву абзацев и возвращаем шаблон name = «абзац» для каждого значения.
meteorApp.html
<head>
<title>meteorApp</title>
</head>
<body>
<div>
{{#each paragraphs}}
{{> paragraph}}
{{/each}}
</div>
</body>
<template name = "paragraph">
<p>{{text}}</p>
</template>
Нам нужно создать вспомогательные пункты . Это будет массив с пятью текстовыми значениями.
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..." }
]
});
}
Теперь мы можем увидеть пять абзацев на экране.