Szukaj…
Wprowadzenie
Blaze to potężna biblioteka do tworzenia interfejsów użytkownika przez pisanie dynamicznych, reaktywnych szablonów HTML. Szablon Blaze pozwala na stosowanie pętli i logiki warunkowej bezpośrednio w znacznikach HTML. Ta sekcja wyjaśnia i demonstruje prawidłowe użycie szablonów w Meteor.js z Blaze.
Wypełnij szablon z wywołania metody
<template name="myTemplate">
{{#each results}}
<div><span>{{name}}</span><span>{{age}}</span></div>
{{/each}}
</template>
Template.myTemplate.onCreated(function() {
this.results = new ReactiveVar();
Meteor.call('myMethod', (error, result) => {
if (error) {
// do something with the error
} else {
// results is an array of {name, age} objects
this.results.set(result);
}
});
});
Template.myTemplate.helpers({
results() {
return Template.instance().results.get();
}
});
Kontekst danych szablonu
Za każdym razem, gdy wywoływany jest szablon, domyślny kontekst danych szablonu jest domyślnie uzyskiwany z programu wywołującego, ponieważ na przykład childTemplate uzyskuje kontekst danych z parentTemplate, tj. Szablon programu wywołującego
<template name="parentTemplate">
{{#with someHelperGettingDataForParentTemplate}}
<h1>My name is {{firstname}} {{lastname}}</h1>
//some stuffs here
{{> childTemplate}}
{{/with}}
</template>
W powyższej sytuacji wszystkie dane, które pomocnik wyodrębnia dla szablonu nadrzędnego, są automatycznie pozyskiwane przez childTemplate. Na przykład {{firstname}} i {{lastname}} można uzyskać z childTemplate, jak pokazano poniżej.
<template name="childTemplate">
<h2>My name is also {{firstname}} {{lastname}}</h2>
</template>
Możemy nawet jawnie zdefiniować kontekst danych childTemplate, przekazując argumenty do szablonu, jak w poniższym przykładzie.
<template name="parentTemplate">
{{#with someHelperGettingDataForParentTemplate}}
<h1>My name is {{firstname}} {{lastname}}</h1>
//some stuffs here
{{> childTemplate childData=someHeplerReturningDataForChild}}
{{/with}}
</template>
Zakładając, że pomocnik someHelperReturningDataForChild zwraca obiekt taki jak {zawód: „Meteor Developer”, hobby: „stackoverflowing”}, ten konkretny obiekt będzie jawnym kontekstem danych dla childTemplate. Teraz w szablonie podrzędnym możemy zrobić coś takiego
<template name="childTemplate">
<h2>My profession is {{profession}}</h2>
<h3>My hobby is {{hobby}}</h3>
</template>
Pomocnicy szablonów
Pomocniki szablonów są istotną częścią Blaze i zapewniają zarówno logikę biznesową, jak i reaktywność szablonu. Ważne jest, aby pamiętać, że pomocniki szablonów są w rzeczywistości obliczeniami reaktywnymi, które są uruchamiane za każdym razem, gdy zmieniają się ich zależności. W zależności od potrzeb pomocników szablonów można zdefiniować globalnie lub określić konkretny szablon. Przykłady każdego podejścia do definicji szablonu pomocnika podano poniżej.
- Przykład pomocnika szablonów o zasięgu do jednego szablonu.
Najpierw zdefiniuj szablon:
<template name="welcomeMessage">
<h1>Welcome back {{fullName}}</h1>
</template>
Następnie zdefiniuj pomocnika Szablon. Zakłada się, że kontekst danych szablonu zawiera właściwości firstName i lastName.
Template.welcomeMessage.helpers({
fullName: function() {
const instance = Template.instance();
return instance.data.firstName + ' ' + instance.data.lastName
},
});
- Przykład globalnego pomocnika szablonów (ten pomocnik może być używany z dowolnego szablonu)
Najpierw zarejestruj pomocnika:
Template.registerHelper('equals', function(item1, item2) {
if (!item1 || !item2) {
return false;
}
return item1 === item2;
});
Po zdefiniowaniu pomocnika equals mogę teraz używać go w dowolnym szablonie:
<template name="registration">
{{#if equals currentUser.registrationStatus 'Pending'}}
<p>Don't forget to complete your registration!<p>
{{/if}}
</template>
