meteor
Blaze Templando

Introducción

Rellenar una plantilla a partir de una llamada de método

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

Contexto de datos de una plantilla

Cuando se llama a una plantilla, el contexto de datos predeterminado de la plantilla se obtiene de forma implícita del llamante, como en el ejemplo childTemplate obtiene el contexto de datos de la plantilla principal, es decir, la plantilla del llamante

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

En la situación anterior, cualquier información que el ayudante extraiga para la plantilla principal se obtiene automáticamente por childTemplate. Por ejemplo, se puede acceder a {{firstname}} y {{lastname}} desde childTemplate como se muestra a continuación.

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

Incluso podemos definir explícitamente el contexto de datos de childTemplate pasando argumentos a la plantilla como se muestra en el siguiente ejemplo.

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

Asumiendo que el ayudante someHelperReturningDataForChild devuelve un objeto como {profession: "Meteor Developer", hobby: "stackoverflowing"}, este objeto en particular será el contexto de datos explícitos para el childTemplate. Ahora en plantilla infantil podemos hacer algo como

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

Ayudantes de plantilla

Los ayudantes de plantillas son una parte esencial de Blaze y proporcionan lógica empresarial y reactividad a una plantilla. Es importante recordar que los ayudantes de plantilla son en realidad cálculos reactivos que se vuelven a ejecutar cada vez que cambian sus dependencias. Dependiendo de sus necesidades, los ayudantes de plantillas se pueden definir globalmente o en función de una plantilla específica. A continuación se proporcionan ejemplos de cada enfoque de definición de ayudante de plantilla.

1. Ejemplo de un asistente de plantillas con ámbito a una sola plantilla.

Primero define tu plantilla:

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

Luego define el ayudante de plantilla. Esto supone que el contexto de datos de la plantilla contiene una propiedad firstName y lastName.

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

2. Ejemplo de un ayudante de plantilla global (este ayudante puede usarse desde cualquier plantilla)

Primero registra al ayudante:

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

  return item1 === item2;
});

Con el ayudante de equals definido, ahora puedo usarlo dentro de cualquier plantilla:

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