meteor
Blaze Templating

Einführung

Füllen Sie eine Vorlage aus einem Methodenaufruf aus

<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();
  }
});

Datenkontext einer Vorlage

Wenn eine Vorlage aufgerufen wird, wird der Standarddatenkontext der Vorlage implizit vom Aufrufer abgerufen, da childTemplate im Beispiel den Datenkontext der parentTemplate, dh der Aufrufer-Vorlage, erhält

<template name="parentTemplate">
    {{#with someHelperGettingDataForParentTemplate}}
    <h1>My name is {{firstname}} {{lastname}}</h1>
    //some stuffs here
    {{> childTemplate}}
    {{/with}}
</template>

In der obigen Situation werden alle Daten, die die Helfer-Extrakte für die übergeordnete Vorlage extrahieren, automatisch von childTemplate abgerufen. Beispiel: Auf {{firstname}} und {{lastname}} kann über childTemplate zugegriffen werden, wie unten gezeigt.

<template name="childTemplate">
<h2>My name is also {{firstname}} {{lastname}}</h2>
</template>

Wir können sogar den Datenkontext der childTemplate explizit definieren, indem Sie Argumente an die Vorlage übergeben, wie im Beispiel unten.

<template name="parentTemplate">
    {{#with someHelperGettingDataForParentTemplate}}
    <h1>My name is {{firstname}} {{lastname}}</h1>
    //some stuffs here
    {{> childTemplate childData=someHeplerReturningDataForChild}}
    {{/with}}
</template>

Wenn der Helfer davon ausgeht, dass someHelperReturningDataForChild ein Objekt wie {profession: "Meteor Developer", Hobby: "stackoverflowing"}, zurückgibt, wird dieses bestimmte Objekt der explizite Datenkontext für die childTemplate. Jetzt können wir in der Kindervorlage etwas tun

<template name="childTemplate">
    <h2>My profession is {{profession}}</h2>
    <h3>My hobby is {{hobby}}</h3>
</template>

Vorlagenhelfer

Vorlagen-Helfer sind ein wesentlicher Bestandteil von Blaze und bieten sowohl Geschäftslogik als auch Reaktivität für eine Vorlage. Beachten Sie, dass Vorlagenhelfer tatsächlich reaktive Berechnungen sind , die immer dann ausgeführt werden, wenn sich ihre Abhängigkeiten ändern. Je nach Ihren Anforderungen können Vorlagenhelfer global definiert werden oder auf eine bestimmte Vorlage festgelegt werden. Nachfolgend finden Sie Beispiele für jeden Ansatz zur Definition der Vorlagen-Helper.

1. Beispiel für einen Vorlagen-Helfer, der sich auf eine einzelne Vorlage bezieht.

Definieren Sie zuerst Ihre Vorlage:

<template name="welcomeMessage">
  <h1>Welcome back {{fullName}}</h1>
</template>

Definieren Sie dann den Template-Helfer. Dies setzt voraus, dass der Datenkontext der Vorlage die Eigenschaften firstName und lastName enthält.

Template.welcomeMessage.helpers({
  fullName: function() {
    const instance = Template.instance();
    return instance.data.firstName + ' ' + instance.data.lastName
  },
});

2. Beispiel für einen globalen Vorlagen-Helfer (dieser Helfer kann in einer beliebigen Vorlage verwendet werden)

Registrieren Sie zuerst den Helfer:

Template.registerHelper('equals', function(item1, item2) {
  if (!item1 || !item2) {
    return false;
  }

  return item1 === item2;
});

equals Helfer "Gleich" definiert ist, kann ich ihn jetzt in jeder Vorlage verwenden:

<template name="registration">
  {{#if equals currentUser.registrationStatus 'Pending'}}
    <p>Don't forget to complete your registration!<p>
  {{/if}}
</template>