meteor
Blaze Templating

Introduktion

Upprätta en mall från ett metodsamtal

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

Datakontekst för en mall

När en mall anropas, får man standarddata-sammanhanget för mallen implicit från den som ringer, som i exemplet barnetTemplate får datakontekten för parentTemplate, dvs.

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

I ovanstående situation kan alla data som hjälper extraherar för föräldermall automatiskt erhållas av childTemplate. Till exempel kan {{firstname}} och {{efternamn}} nås från childTemplate så som visas nedan.

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

Vi kan till och med uttryckligen definiera datasammanhanget för childTemplate genom att skicka argument till mallen som i nedanstående exempel.

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

Förutsatt att hjälperen someHelperReturningDataForChild returnerar objekt som {yrke: "Meteor Developer", hobby: "stackoverflowing"}, kommer detta specifika objekt att vara den exakta datasammanhanget för childTemplate. Nu i barnmall kan vi göra något liknande

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

Mallhjälpare

Mallhjälpare är en viktig del av Blaze och ger både affärslogik och reaktivitet till en mall. Det är viktigt att komma ihåg att mallhjälpare faktiskt är reaktiva beräkningar som återkörs när deras beroenden ändras. Beroende på dina behov kan mallhjälpare definieras globalt eller skopas till en specifik mall. Exempel på varje metod för definition av mallhjälper ges nedan.

1. Exempel på en mallhjälpare till en enda mall.

Definiera först din mall:

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

Definiera sedan mallhjälpen. Detta antar att datakonteksten för mallen innehåller en egendom förnamn och efternamn.

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

2. Exempel på en global mallhjälpare (denna hjälper kan användas från vilken mall som helst)

Registrera först hjälparen:

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

  return item1 === item2;
});

Med den equals hjälpen definierad kan jag nu använda den inom vilken mall som helst:

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