meteor
Blaze Templating

Wprowadzenie

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.

1. 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
  },
});

2. 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>