Meteor - Şablonlar
Meteor şablonları üç üst düzey etiket kullanıyor. İlk ikisihead ve body. Bu etiketler, normal HTML'deki ile aynı işlevleri yerine getirir. Üçüncü etikettemplate. HTML'yi JavaScript'e bağladığımız yer burasıdır.
Basit Şablon
Aşağıdaki örnek bunun nasıl çalıştığını göstermektedir. İle bir şablon oluşturuyoruzname = "myParagraph"öznitelik. bizimtemplate etiketi altında oluşturulur bodyöğesi, ancak ekranda görüntülenmeden önce eklememiz gerekir. Kullanarak yapabiliriz{{> myParagraph}}sözdizimi. Şablonumuzda çift küme parantezi kullanıyoruz({{text}}). Bu meteor şablon dilidirSpacebars.
JavaScript dosyamızda ayarlıyoruz Template.myParagraph.helpers({})şablonumuzla bağlantımız olacak yöntem. Biz sadece kullanıyoruztext bu örnekte yardımcı.
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...'
});
}Değişiklikleri kaydettikten sonra, aşağıdaki çıktı olacaktır -
Blok Şablonu
Aşağıdaki örnekte kullanıyoruz {{#each paragraphs}} üzerinde yinelemek paragraphs dizi ve dönüş şablonu name = "paragraph" her değer için.
meteorApp.html
<head>
<title>meteorApp</title>
</head>
<body>
<div>
{{#each paragraphs}}
{{> paragraph}}
{{/each}}
</div>
</body>
<template name = "paragraph">
<p>{{text}}</p>
</template>Yaratmalıyız paragraphsyardımcı. Bu, beş metin değerine sahip bir dizi olacaktır.
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..." }
]
});
}Şimdi ekranda beş paragraf görebiliriz.
