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.