meteor
Blaze Templating

introduzione

Compila un modello da una chiamata di metodo

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

Contesto dati di un modello

Ogni volta che viene richiamato un modello, il contesto di dati predefinito del modello viene acquisito implicitamente dal chiamante, come nell'esempio il childTemplate acquisisce il contesto di dati del modello parentTemplate, ovvero il modello del chiamante

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

Nella situazione di cui sopra, qualsiasi dato estratto dall'helper per il modello principale viene acquisito automaticamente da childTemplate.Ad esempio, è possibile accedere a {{firstname}} e {{lastname}} da childTemplate, come mostrato di seguito.

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

Possiamo anche definire esplicitamente il contesto dei dati del childTemplate mediante argomenti passivi al modello come nell'esempio seguente.

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

Supponendo che helper someHelperReturningDataForChild restituisca oggetto come {professione: "Meteor Developer", hobby: "stackoverflowing"}, questo oggetto particolare sarà il contesto dati esplicito per childTemplate. Ora nel modello figlio possiamo fare qualcosa di simile

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

Helpers modello

Gli helper dei modelli sono una parte essenziale di Blaze e forniscono sia la logica aziendale che la reattività a un modello. È importante ricordare che gli helper dei modelli sono in realtà calcoli reattivi che vengono rieseguiti ogni volta che cambiano le loro dipendenze. A seconda delle esigenze, gli helper dei modelli possono essere definiti globalmente o associati a un modello specifico. Di seguito sono riportati esempi di ciascun approccio di definizione dell'helper di modelli.

1. Esempio di un helper di modelli con ambito per un singolo modello.

Prima definisci il tuo modello:

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

Quindi definire l'helper Template. Ciò presuppone che il contesto di dati del modello contenga una proprietà firstName e lastName.

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

2. Esempio di un helper di modelli globale (questo helper può essere utilizzato da qualsiasi modello)

Prima registra l'aiutante:

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

  return item1 === item2;
});

Con l'helper equals definito, ora posso utilizzarlo in qualsiasi modello:

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