meteor
Blaze Templating

Introduction

Remplir un modèle à partir d'un appel de méthode

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

Contexte de données d'un modèle

Chaque fois qu'un modèle est appelé, le contexte de données par défaut du modèle est implicitement obtenu à partir de l'appelant, par exemple, le childTemplate gagne le contexte de données du parentTemplate, c'est-à-dire le modèle de l'appelant.

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

Dans la situation ci-dessus, quelles que soient les données extraites automatiquement par le composant parent par childTemplate.For exemple, {{firstname}} et {{lastname}} sont accessibles depuis childTemplate, comme indiqué ci-dessous.

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

Nous pouvons même définir explicitement le contexte de données du childTemplate en transmettant des arguments au modèle, comme dans l'exemple ci-dessous.

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

En supposant que l'assistant someHelperReturningDataForChild renvoie un objet tel que {profession: "Meteor Developer", hobby: "stackoverflowing"}, cet objet particulier sera le contexte de données explicite pour le childTemplate. Maintenant, dans le modèle enfant, nous pouvons faire quelque chose comme

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

Aide du modèle

Les aides de modèle sont une partie essentielle de Blaze et fournissent à la fois une logique métier et une réactivité à un modèle. Il est important de se rappeler que les assistants Template sont en réalité des calculs réactifs qui sont réexécutés chaque fois que leurs dépendances changent. Selon vos besoins, les assistants de modèle peuvent être définis globalement ou définis sur un modèle spécifique. Des exemples de chaque approche de définition d’assistant de modèle sont fournis ci-dessous.

1. Exemple d'assistance de modèle limitée à un modèle unique.

Définissez d'abord votre modèle:

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

Ensuite, définissez l'aide du modèle. Cela suppose que le contexte de données du modèle contient une propriété firstName et lastName.

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

2. Exemple d'une aide globale de modèle (cette aide peut être utilisée depuis n'importe quel modèle)

Commencez par enregistrer l'aide:

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

  return item1 === item2;
});

Avec l'assistant d' equals défini, je peux maintenant l'utiliser dans n'importe quel modèle:

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