Meteor - Vorlagen
Meteor-Vorlagen verwenden drei Tags der obersten Ebene. Die ersten beiden sindhead und body. Diese Tags erfüllen dieselben Funktionen wie in normalem HTML. Das dritte Tag isttemplate. Dies ist der Ort, an dem wir HTML mit JavaScript verbinden.
Einfache Vorlage
Das folgende Beispiel zeigt, wie dies funktioniert. Wir erstellen eine Vorlage mitname = "myParagraph"Attribut. Unseretemplate Tag wird unter dem erstellt bodyElement müssen wir es jedoch einschließen, bevor es auf dem Bildschirm gerendert wird. Wir können es tun, indem wir{{> myParagraph}}Syntax. In unserer Vorlage verwenden wir doppelte geschweifte Klammern({{text}}). Dies ist die Meteor-VorlagenspracheSpacebars.
In unserer JavaScript-Datei setzen wir Template.myParagraph.helpers({})Methode, die unsere Verbindung zu unserer Vorlage sein wird. Wir verwenden nurtext Helfer in diesem Beispiel.
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...'
});
}Nachdem wir die Änderungen gespeichert haben, folgt die Ausgabe:
Blockvorlage
Im folgenden Beispiel verwenden wir {{#each paragraphs}} über die iterieren paragraphs Array und Return-Vorlage name = "paragraph" für jeden Wert.
meteorApp.html
<head>
<title>meteorApp</title>
</head>
<body>
<div>
{{#each paragraphs}}
{{> paragraph}}
{{/each}}
</div>
</body>
<template name = "paragraph">
<p>{{text}}</p>
</template>Wir müssen schaffen paragraphsHelfer. Dies ist ein Array mit fünf Textwerten.
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..." }
]
});
}Jetzt können wir fünf Absätze auf dem Bildschirm sehen.
