meteor
Blaze Templating

Invoering

Vul een sjabloon in vanuit een methodeaanroep

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

Gegevenscontext van een sjabloon

Telkens wanneer een sjabloon wordt opgeroepen, wordt de standaardgegevenscontext van de sjabloon impliciet van de beller opgehaald, omdat bijvoorbeeld de childTemplate de gegevenscontext van de parentTemplate verkrijgt, dwz de bellersjabloon

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

In de bovenstaande situatie worden alle gegevens die de helper-extracten voor bovenliggende sjabloon ophalen automatisch opgehaald door childTemplate. De {{firstname}} en {{achternaam}} zijn bijvoorbeeld toegankelijk via childTemplate en worden hieronder weergegeven.

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

We kunnen zelfs expliciet de gegevenscontext van de childTemplate definiëren door argumenten door te geven aan de sjabloon zoals in het onderstaande voorbeeld.

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

Ervan uitgaande dat de helper someHelperReturningDataForChild een object als {profession: "Meteor Developer", hobby: "stackoverflowing"} retourneert, wordt dit specifieke object de expliciete gegevenscontext voor de childTemplate. Nu kunnen we in kindersjabloon zoiets doen

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

Sjabloonhelpers

Sjabloonhulpmiddelen zijn een essentieel onderdeel van Blaze en bieden zowel bedrijfslogica als reactiviteit voor een sjabloon. Het is belangrijk om te onthouden dat Template-helpers eigenlijk reactieve berekeningen zijn die opnieuw worden uitgevoerd wanneer hun afhankelijkheden veranderen. Afhankelijk van uw behoeften kunnen Template-helpers globaal worden gedefinieerd of tot een specifiek sjabloon worden uitgebreid. Voorbeelden van elke Template helper-definitiebenadering worden hieronder gegeven.

1. Voorbeeld van een Template-helper met één sjabloon.

Definieer eerst uw sjabloon:

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

Definieer vervolgens de sjabloonhelper. Dit veronderstelt dat de gegevenscontext van de sjabloon een eigenschap firstName en lastName bevat.

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

2. Voorbeeld van een globale sjabloonhelper (deze helper kan vanuit elke sjabloon worden gebruikt)

Registreer eerst de helper:

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

  return item1 === item2;
});

Met de gedefinieerde helper equals , kan ik deze nu in elke sjabloon gebruiken:

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