Meteor - szablony
Szablony Meteor używają trzech tagów najwyższego poziomu. Pierwsze dwa tohead i body. Te tagi pełnią te same funkcje, co w zwykłym HTML. Trzeci tag totemplate. To miejsce, w którym łączymy HTML z JavaScriptem.
Prosty szablon
Poniższy przykład pokazuje, jak to działa. Tworzymy szablon zname = "myParagraph"atrybut. Nasztemplate tag jest tworzony poniżej bodyelement, jednak musimy go dołączyć, zanim zostanie wyrenderowany na ekranie. Możemy to zrobić za pomocą{{> myParagraph}}składnia. W naszym szablonie używamy podwójnych nawiasów klamrowych({{text}}). To jest język szablonów meteorów o nazwieSpacebars.
W naszym pliku JavaScript ustawiamy Template.myParagraph.helpers({})metoda, która będzie naszym połączeniem z naszym szablonem. Używamy tylkotext pomocnik w tym przykładzie.
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...'
});
}
Po zapisaniu zmian pojawi się wynik -
Szablon bloku
W poniższym przykładzie używamy {{#each paragraphs}} iterować po paragraphs tablica i szablon powrotu name = "paragraph" dla każdej wartości.
meteorApp.html
<head>
<title>meteorApp</title>
</head>
<body>
<div>
{{#each paragraphs}}
{{> paragraph}}
{{/each}}
</div>
</body>
<template name = "paragraph">
<p>{{text}}</p>
</template>
Musimy tworzyć paragraphspomocnik. Będzie to tablica z pięcioma wartościami tekstowymi.
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..." }
]
});
}
Teraz widzimy pięć akapitów na ekranie.