Meteor - Templates
Os modelos do Meteor usam três tags de nível superior. Os dois primeiros sãohead e body. Essas tags executam as mesmas funções do HTML normal. A terceira tag étemplate. Este é o lugar onde conectamos HTML a JavaScript.
Modelo Simples
O exemplo a seguir mostra como isso funciona. Estamos criando um modelo comname = "myParagraph"atributo. Nossotemplate tag é criada abaixo do bodyelemento, no entanto, precisamos incluí-lo antes de ser renderizado na tela. Podemos fazer isso usando{{> myParagraph}}sintaxe. Em nosso modelo, estamos usando chaves duplas({{text}}). Esta é a linguagem de modelo de meteoro chamadaSpacebars.
Em nosso arquivo JavaScript, estamos configurando Template.myParagraph.helpers({})método que será a nossa conexão com o nosso modelo. Estamos apenas usandotext ajudante neste exemplo.
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...'
});
}Depois de salvarmos as alterações, o resultado será o seguinte -
Template de Bloco
No exemplo a seguir, estamos usando {{#each paragraphs}} para iterar sobre o paragraphs array e modelo de retorno name = "paragraph" para cada valor.
meteorApp.html
<head>
<title>meteorApp</title>
</head>
<body>
<div>
{{#each paragraphs}}
{{> paragraph}}
{{/each}}
</div>
</body>
<template name = "paragraph">
<p>{{text}}</p>
</template>Precisamos criar paragraphsajudante. Este será um array com cinco valores de texto.
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..." }
]
});
}Agora, podemos ver cinco parágrafos na tela.
