Utilisation de Handlebars

Les modèles transactionnels dynamiques Twilio SendGrid et les conceptions Campagnes Marketing prennent en charge le langage de modélisation Handlebars pour afficher les personnalisations que vous envoyez via l'API et les balises de substitution stockées sur vos contacts Campagnes Marketing.

La syntaxe Handlebars vous permet de personnaliser les messages de vos modèles en insérant les noms des clients et d'autres données pour rendre un e-mail pertinent pour chaque destinataire. Par exemple, si vous avez un nom de client stocké dans une propriété JSON appelée "name", vous pouvez insérer la valeur de la propriété dans un modèle en ajoutant {{ name }} où vous voulez que le nom du client apparaisse.

La syntaxe Handlebars permet à tous ces modèles dynamiques de se produire en dehors de votre base de code, ce qui signifie que les modifications sont effectuées rapidement dans le modèle sans qu'aucune mise à jour d'une base de code ne soit nécessaire.

Si vous préférez utiliser votre propre système de modélisation, vous pouvez toujours insérer des données dynamiques à l'aide de balises de substitution.

Personnaliser l'e-mail avec Handlebars

Vous pouvez gérer vos modèles par programmation avec notre API d'envoi d'e-mails avec modèles transactionnels dynamiques.

Le langage Handlebars offre de nombreuses fonctionnalités en plus du remplacement de variables de base, y compris les itérations (boucles) et les instructions conditionnelles. Nos modèles et nos conceptions prennent en charge la plupart des fonctionnalités Handlebars, mais pas toutes. Actuellement, les modèles dynamiques prennent en charge les assistants suivants :

Substitution
Déclarations conditionnelles
Itérations

Pour une référence complète, reportez-vous à la référence Handlebars sur cette page.

Cas d'usage

Les exemples d'utilisation suivants proviennent de la section Dynamic-template de notre référentiel de modèles d'e-mail GitHub. Chaque exemple est lié à des fichiers que vous pouvez explorer sur GitHub. Vous pouvez également utiliser ces modèles en les téléchargeant à l'aide de l'éditeur de code disponible dans les modèles transactionnels dynamiques et de la librairie de conception des Campagnes Marketing.

Les cas d'utilisation suivants sont répertoriés avec les assistants Handlebars utilisés pour les fabriquer.

Reçu

Ce modèle d'exemple de reçu utilise les assistants suivants :

Substitution
Déclarations conditionnelles
Itérations

Mot de passe réinitialisé

Ce modèle transactionnel d'exemple utilise les assistants suivants :

Substitution

Plusieurs langues

Il s'agit d'un exemple de modèle qui vous permet d'avoir du contenu dans plusieurs langues et qui utilise les assistants suivants :

Déclarations conditionnelles - if/else

Ce modèle d'exemple de newsletter utilise les assistants suivants :

Substitution
Itérations

Publicité

Il s'agit d'un exemple de modèle qui met en valeur les articles en vente et qui utilise les assistants suivants :

Substitution
Déclarations conditionnelles - if/else
Itérations

Référence Handlebars

La référence suivante fournit des exemples de blocs de code pour chaque assistant, y compris des extraits d'e-mail HTML et des données de test JSON. Les exemples de code sont présentés dans trois onglets. Le premier onglet, Handlebars, montre l'étiquette du même nom. Le deuxième onglet, JSON, montre des exemples de données qui seraient utilisées pour remplir le repère Handlebars. Le troisième onglet, HTML, montre le résultat final sur lequel la balise Handlebars sera affichée dans votre e-mail. Vous pouvez cliquer sur chaque onglet pour basculer entre les exemples de code.

Substitution

Les modèles Twilio SendGrid prennent en charge les substitutions suivantes :

Remplacement de base
Remplacement d'objets approfondi
Échec de l'objet
Remplacement par HTML
formatDate
Insérer

Remplacement de base

<!-- Template -->
<p>Bonjour {{ firstName }}</p>

// Données de test
{ "firstName": "Ben" }

<!-- Resulting HTML !-->
<p>Bonjour Ben</p>

Remplacement d'objet approfondi

<!-- Template -->
<p>Bonjour {{user.profile.firstName}}</p>

// Données de test
{
  "user": {
    "profile": {
      "firstName": "Ben"
    }
  }
}

<!-- Resulting HTML -->
<p>Bonjour Ben</p>

Échec de l'objet

<!-- Template -->
<p>Bonjour {{user.profile.firstName}}</p>

// Données de test
{
  "user": {
    "orderHistory": [
      {
        "date": "2/1/2018",
        "item": "shoes"
      },
      {
        "date": "1/4/2017",
        "item": "hat"
      }
    ]
  }
}

<!-- Resulting HTML -->
<p>Bonjour</p>

Remplacement par HTML

Si vous incluez les caractères ', " ou & dans un objet de remplacement, assurez-vous d'utiliser trois crochets comme ci-dessous.

<!-- Template -->
<!-- Selon la documentation Handlebars : Si vous ne voulez pas que Handlebars ignore une valeur, utilisez "triple-stash", {{{ -->
<p>Bonjour {{{firstName}}}</p>

// Données de test
{ "firstName": "<strong>Ben</strong>" }

<!-- Resulting HTML -->
<p>Bonjour <strong>Ben</strong></p>

formatDate

L'assistant formatDate convertit un temps au format epoch ou ISO8601 dans un format que vous spécifiez à l'aide des jetons du tableau suivant. Si vous envoyez un champ de date sans le convertir, il sera affiché au format ISO8601 avec l'horodatage complet (par exemple, 2020-01-01T23:00:00.000Z). Les exemples de résultats d'affichage suivants concernent le mardi 1er janvier, 2020 à 15h00, heure du Pacifique.

Jeton	Résultat affiché
AAAA	2020
AA	20
MMMM	Janvier
MMM	Janv
MM	01
M	1
JJ	01
J	1
jjjj	Mardi
jjj	Mar
hh	03
h	3
HH	00
H	00
mm	00
m	0
ss	00
s	0
A	PM
ZZ	-0800
Z	-08 : 00

<!-- Template without timezone offset -->
<p>Rejoignez-nous le {{formatDate timeStamp dateFormat}}</p>

<!-- Template with timezone offset -->
<p>Rejoignez-nous le {{formatDate timeStamp dateFormat timezoneOffset}}</p>

// Données de test
{
  "timeStamp": "2020-01-01T23:00:00.000Z",
  "dateFormat": "MMMM:DD:HH:mm:ss",
  "timezoneOffset": "-0800"
}

<!-- Resulting HTML without timezone-->
<p>Rejoignez-nous le 1er janvier, 2020 à 11h</p>

<!-- Resulting HTML with timezone-->
<p>Rejoignez-nous le 1er janvier, 2020 à 15h</p>

Insérer

<!-- Insert with a default value -->
<p>Bonjour, {{insert name "default=Customer"}} ! Merci de nous avoir contactés à propos de {{insert businessName "your business"}}.</p>

// Données de test avec toutes les valeurs
{
   "name": "Ben",
   "businessName": "Twilio SendGrid"
}

// Données de test avec valeur manquante
{
  "name": "Ben"
}

<!-- Resulting HTML with all values -->
<p>Bonjour Ben ! Merci de nous avoir contactés au sujet de Twilio SendGrid.</p>

<!-- Resulting HTML with missing value and a default-->
<p>Bonjour Ben ! Merci de nous avoir contactés au sujet de votre entreprise.</p>

Déclarations conditionnelles

Les modèles Twilio SendGrid prennent en charge les conditions suivantes :

Basic If, Else, Else If
If with a root
Unless
greaterThan
lessThan
Equals
notEquals
And
Or
Length

Basic If, Else, Else If

<!-- Template -->
{{#if user.profile.male}}
   <p>Monsieur</p>
{{else if user.profile.female}}
   <p>Madame</p>
{{else}}
   <p>Cher client</p>
{{/if}}

// Données de test numéro un
{
   "user":{
      "profile":{
         "male":true
      }
   }
}

// Données de test numéro deux
{
   "user":{
      "profile":{
         "female":true
      }
   }
}

// Données de test numéro trois
{
   "user":{
      "profile":{

      }
   }
}

<!-- Resulting HTML from test data one -->
<p>Monsieur</p>

<!-- Resulting HTML from test data two -->
<p>Madame</p>

<!-- Resulting HTML from test data three -->
<p>Cher client</p>

If with a root

<!-- Template -->
{{#if user.suspended}}
   <p>Avertissement ! Votre compte est suspendu, veuillez appeler le : {{@root.supportPhone}}</p>
{{/if}}

// Données de test
{
  "user": {
    "suspended": true
  },
  "supportPhone": "1-800-555-5555"
}

<!-- Resulting HTML -->
<p>Avertissement ! Votre compte est suspendu, veuillez appeler le : 1-800-555-5555</p>

Unless

<!-- Template -->
{{#unless user.active}}
   <p>Avertissement ! Votre compte est suspendu, veuillez appeler le : {{@root.supportPhone}}</p>
{{/unless}}

// Données de test
{
  "user": {
    "active": false
  },
  "supportPhone": "1-800-555-5555"
}

<!-- Resulting HTML -->
<p>Avertissement ! Votre compte est suspendu, veuillez appeler le : 1800-555-5555</p>

greaterThan

Basic greaterThan

<!-- Template -->
<p>
Bonjour Ben !
{{#greaterThan scoreOne scoreTwo}}
    Félicitations, vous avez obtenu le meilleur score aujourd'hui !
{{/greaterThan}}
 Merci d'avoir joué.
</p>

// Données de test numéro un
{
  "scoreOne": 100,
  "scoreTwo": 78
}

// Données de test numéro deux
{
  "scoreOne": 55,
  "scoreTwo": 78
}

<!-- Resulting HTML from test data one-->
<p>
  Bonjour Ben ! Félicitations, vous avez obtenu le meilleur score aujourd'hui ! Merci d'avoir joué.
</p>

<!-- Resulting HTML from test data two-->
<p>Bonjour Ben ! Merci d'avoir joué.</p>

greaterThan with else

<!-- Template -->
<p>
Bonjour Ben !
{{#greaterThan scoreOne scoreTwo}}
    Félicitations, vous avez obtenu le meilleur score aujourd'hui !
{{else}}
    Vous y étiez presque, mais vous n'avez pas obtenu le meilleur score aujourd'hui.
{{/greaterThan}}
 Merci d'avoir joué.
</p>

// Données de test numéro un
{
  "scoreOne": 100,
  "scoreTwo": 78
}

// Données de test numéro deux
{
  "scoreOne": 55,
  "scoreTwo": 78
}

<!-- Resulting HTML from test data one-->
<p>
  Bonjour Ben ! Félicitations, vous avez obtenu le meilleur score aujourd'hui ! Merci d'avoir joué.
</p>

<!-- Resulting HTML from test data two-->
<p>
  Bonjour Ben ! Vous y étiez presque, mais vous n'avez pas obtenu le meilleur score aujourd'hui. Merci d'avoir
  joué.
</p>

lessThan

Basic lessThan

<!-- Template -->
<p>
Bonjour Ben !
{{#lessThan scoreOne scoreTwo}}
    Vous y étiez presque, mais vous n'avez pas obtenu le meilleur score aujourd'hui.
{{/lessThan}}
 Merci d'avoir joué.
</p>

// Données de test numéro un
{
  "scoreOne": 55,
  "scoreTwo": 78
}

// Données de test numéro deux
{
  "scoreOne": 100,
  "scoreTwo": 78
}

<!-- Resulting HTML from test data one-->
<p>
  Bonjour Ben ! Vous y étiez presque, mais vous n'avez pas obtenu le meilleur score aujourd'hui. Merci d'avoir
  joué.
</p>

<!-- Resulting HTML from test data two-->
<p>Bonjour Ben ! Merci d'avoir joué.</p>

lessThan with else

<!-- Template -->
<p>
Bonjour Ben !
{{#lessThan scoreOne scoreTwo}}
    Vous y étiez presque, mais vous n'avez pas obtenu le meilleur score aujourd'hui.
{{else}}
    Félicitations, vous avez obtenu le meilleur score aujourd'hui !
{{/lessThan}}
 Merci d'avoir joué.
</p>

// Données de test numéro un
{
  "scoreOne": 55,
  "scoreTwo": 78
}

// Données de test numéro deux
{
  "scoreOne": 100,
  "scoreTwo": 78
}

<!-- Resulting HTML from test data one-->
<p>
  Bonjour Ben ! Vous y étiez presque, mais vous n'avez pas obtenu le meilleur score aujourd'hui. Merci d'avoir
  joué.
</p>

<!-- Resulting HTML from test data two-->
<p>
  Bonjour Ben ! Félicitations, vous avez obtenu le meilleur score aujourd'hui ! Merci d'avoir joué.
</p>

Equals

La comparaison equals peut vérifier l'égalité entre deux valeurs du même type de données. L'assistant equals tentera également de contraindre les types de données pour faire une comparaison des valeurs indépendamment de leur type de données. Par exemple, {{#equals 3 "3"}} sera évalué à true.

Veuillez noter que la page Preview (Aperçu) de l'éditeur n'affichera pas correctement les résultats d'une comparaison entre les valeurs contraintes. Vous verrez les comparaisons appropriées entre les valeurs contraintes uniquement dans un message transmis.

Lors de la vérification de la véracité, sachez que les chaînes vides, les entiers zéro et les nombres à virgule flottante zéro sont évalués à false. Les chaînes non vides, les entiers non nuls et les nombres à virgule flottante non nuls, y compris les nombres négatifs, sont évalués à true.

Basic equals

<!-- Template -->
<p>
Bonjour Ben !
{{#equals customerCode winningCode}}
    Vous avez un code gagnant.
{{/equals}}
 Merci d'avoir joué.
</p>

// Données de test numéro un
{
  "customerCode": 289199,
  "winningCode": 289199
}

// Données de test numéro deux
{
  "customerCode": 167320,
  "winningCode": 289199
}

<!-- Resulting HTML from test data one-->
<p>Bonjour Ben ! Vous avez un code gagnant. Merci d'avoir joué.</p>

<!-- Resulting HTML from test data two-->
<p>Bonjour Ben ! Merci d'avoir joué.</p>

Equals with else

<!-- Template -->
<p>
Bonjour Ben !
{{#equals customerCode winningCode}}
    Vous avez un code gagnant.
{{else}}
    Vous n'avez pas de code gagnant.
{{/equals}}
 Merci d'avoir joué.
</p>

// Données de test numéro un
{
  "customerCode": 289199,
  "winningCode": 289199
}

// Données de test numéro deux
{
  "customerCode": 167320,
  "winningCode": 289199
}

<!-- Resulting HTML from test data one-->
<p>Bonjour Ben ! Vous avez un code gagnant. Merci d'avoir joué.</p>

<!-- Resulting HTML from test data two-->
<p>Bonjour Ben ! Vous n'avez pas de code gagnant. Merci d'avoir joué.</p>

notEquals

La comparaison notEquals peut vérifier l'égalité entre deux valeurs du même type de données. L'assistant notEquals tentera également de contraindre les types de données pour faire une comparaison des valeurs indépendamment de leur type de données. Par exemple, {{#equals 3 "3"}} renvoie false.

Basic notEquals

<!-- Template -->
<p>
Bonjour Ben !
{{#notEquals customerCode winningCode}}
    Vous avez un code gagnant.
{{/notEquals}}
 Merci d'avoir joué.
</p>

// Données de test numéro un
{
  "customerCode": 289199,
  "winningCode": 289199
}

// Données de test numéro deux
{
  "customerCode": 167320,
  "winningCode": 289199
}

<!-- Resulting HTML from test data one-->
<p>Bonjour Ben ! Vous avez un code gagnant. Merci d'avoir joué.</p>

<!-- Resulting HTML from test data two-->
<p>Bonjour Ben ! Merci d'avoir joué.</p>

notEquals with else

<!-- Template -->
<p>
Bonjour Ben !
{{#notEquals customerCode winningCode}}
    Vous avez un code gagnant.
{{else}}
    Vous n'avez pas de code gagnant.
{{/notEquals}}
 Merci d'avoir joué.
</p>

// Données de test numéro un
{
  "customerCode": 289199,
  "winningCode": 289199
}

// Données de test numéro deux
{
  "customerCode": 167320,
  "winningCode": 289199
}

<!-- Resulting HTML from test data one-->
<p>Bonjour Ben ! Vous avez un code gagnant. Merci d'avoir joué.</p>

<!-- Resulting HTML from test data two-->
<p>Bonjour Ben ! Vous n'avez pas de code gagnant. Merci d'avoir joué.</p>

And

And without else

<!-- Template -->
<p>
Bonjour Ben !
{{#and favoriteFood favoriteDrink}}
   Merci de nous avoir fait part de vos préférences en matière de repas.
{{/and}}.
 Nous avons hâte de vous envoyer d'autres recettes délicieuses.</p>

// Données de test numéro un
{
  "favoriteFood": "Pasta",
  "favoriteDrink": ""
}

// Données de test numéro deux
{
  "favoriteFood": "Pasta",
  "favoriteDrink": "Coffee"
}

<!-- Resulting HTML from test data one -->
<p>Bonjour Ben ! Nous avons hâte de vous envoyer d'autres recettes délicieuses.</p>

<!-- Resulting HTML from test data two -->
<p>
  Bonjour Ben ! Merci de nous avoir fait part de vos préférences en matière de repas. Nous avons hâte
  de vous envoyer d'autres recettes délicieuses.
</p>

And with else

<!-- Template -->
<p>
Bonjour Ben !
{{#and favoriteFood favoriteDrink}}
   Merci de nous avoir fait part de vos préférences en matière de repas.
{{else}}
   Si vous avez terminé de répondre au questionnaire sur vos préférences en matière de repas, nous pouvons vous proposer des recettes qui vous intéressent le plus.
{{/and}}.
 Nous avons hâte de vous envoyer d'autres recettes délicieuses.</p>

// Données de test numéro un
{
  "favoriteFood": "Pasta",
  "favoriteDrink": ""
}

// Données de test numéro deux
{
  "favoriteFood": "Pasta",
  "favoriteDrink": "Coffee"
}

<!-- Resulting HTML from test data one -->
<p>
  Bonjour Ben ! Si vous avez terminé de répondre au questionnaire sur vos préférences en matière de restaurants, nous pouvons
  vous fournir des recettes qui devraient vous intéresser. Nous avons hâte
  de vous envoyer d'autres recettes délicieuses.
</p>

<!-- Resulting HTML from test data two -->
<p>
  Bonjour Ben ! Merci de nous avoir fait part de vos préférences en matière de repas. Nous avons hâte
  de vous envoyer d'autres recettes délicieuses.
</p>

Or

Basic or

<!-- Template -->
<p>
Bonjour Ben !
{{#or isRunner isCyclist}}
   Nous pensons qu'une carte des sentiers de votre région pourrait vous plaire.
{{/or}}.
 Bonne journée.
</p>

// Données de test numéro un
{
  "isRunner": true,
  "isCyclist": false
}

// Données de test numéro deux
{
  "isRunner": false,
  "isCyclist": false
}
// Données de test numéro trois
{
  "isRunner": false,
  "isCyclist": true
}

<!-- Resulting HTML from test data one -->
<p>
  Bonjour Ben ! Nous pensons qu'une carte des sentiers de votre région pourrait vous plaire. Vous trouverez
  la carte jointe à cet e-mail. Bonne journée.
</p>

<!-- Resulting HTML from test data two -->
<p>Bonjour Ben ! Bonne journée.</p>

<!-- Resulting HTML from test data three -->
<p>
  Bonjour Ben ! Nous pensons qu'une carte des sentiers de votre région pourrait vous plaire. Vous trouverez
  la carte jointe à cet e-mail. Bonne journée.
</p>

Or with else

<!-- Template -->
<p>
Bonjour Ben !
{{#or isRunner isCyclist}}
   Nous pensons qu'une carte des sentiers de votre région pourrait vous plaire. Vous trouverez la carte jointe à cet e-mail.
{{else}}
   Nous aimerions en savoir plus sur les activités de plein air que vous aimez. Le questionnaire ci-dessous ne vous prendra qu'une minute.
{{/or}}.
 Bonne journée.
</p>

// Données de test numéro un
{
  "isRunner": true,
  "isCyclist": false
}

// Données de test numéro deux
{
  "isRunner": false,
  "isCyclist": false
}
// Données de test numéro trois
{
  "isRunner": false,
  "isCyclist": true
}

<!-- Resulting HTML from test data one -->
<p>
  Bonjour Ben ! Nous pensons qu'une carte des sentiers de votre région pourrait vous plaire. Vous trouverez
  la carte jointe à cet e-mail. Bonne journée.
</p>

<!-- Resulting HTML from test data two -->
<p>
  Bonjour Ben ! Nous aimerions en savoir plus sur les activités de plein air que vous aimez. Le
  questionnaire ci-dessous ne vous prendra qu'une minute. Bonne journée.
</p>

<!-- Resulting HTML from test data three -->
<p>
  Bonjour Ben ! Nous pensons qu'une carte des sentiers de votre région pourrait vous plaire. Vous trouverez
  la carte jointe à cet e-mail. Bonne journée.
</p>

Length

L'assistant de longueur renvoie le nombre de caractères d'une chaîne ou d'un tableau donné. Pour les valeurs non-chaîne et non-tableau, la longueur renvoie 0. Length peut être utile en combinaison avec d'autres assistants, comme illustré ci-après dans l'exemple avec greaterThan.

<!-- Templates -->
<p>
Bonjour Ben !
{{#greaterThan 0 length cartItems}}
 Il semble que vous ayez encore des articles dans votre panier. Revenez à tout moment pour poursuivre vos achats.
{{else}}
 Merci d'avoir utilisé notre site. Nous espérons vous revoir très bientôt.
{{/greaterThan}}
</p>

// Données de test numéro un
{
  "cartItems": ["raft", "water bottle", "sleeping bag"]
}

// Données de test numéro deux
{
  "cartItems": []
}

<!-- Resulting HTML with test data one-->
<p>
  Bonjour Ben ! Il semble que vous ayez encore des articles dans votre panier. Revenez
  à tout moment pour poursuivre vos achats.
</p>

<!-- Resulting HTML with test data two-->
<p>Bonjour Ben ! Merci d'avoir utilisé notre site. Nous espérons vous revoir très bientôt.</p>

Itérations

Vous pouvez effectuer une boucle ou une itération sur des données à l'aide de la fonction d'assistant {{#each }} pour construire des listes et exécuter d’autres actions de modélisation utiles.

Basic Iterator with each

<!-- Template -->
<ol>
  {{#each user.orderHistory}}
   <li>Vous avez commandé : {{this.item}} on: {{this.date}}</li>
  {{/each}}
</ol>

// Données de test
{
  "user": {
    "orderHistory": [
      {
        "date": "2/1/2018",
        "item": "shoes"
      },
      {
        "date": "1/4/2017",
        "item": "hat"
      }
    ]
  }
}

<!-- Resulting HTML -->
<ol>
  <li>Vous avez commandé : des chaussures le : 2/1/2018</li>
  <li>Vous avez commandé : un chapeau le : 1/4/2017</li>
</ol>

Exemples combinés

Les exemples suivants vous montrent comment combiner plusieurs fonctions Handlebars pour créer un modèle vraiment dynamique.

Création dynamique de contenu
Création dynamique de contenu avec parties dynamiques 1
Création dynamique de contenu avec parties dynamiques 2

Création dynamique de contenu

<!-- Template -->
{{#each user.story}}
   {{#if this.male}}
      <p>{{this.date}}</p>
   {{else if this.female}}
      <p>{{this.item}}</p>
   {{/if}}
{{/each}}

// Données de test
{
  "user": {
    "story": [
      {
        "male": true,
        "date": "2/1/2018",
        "item": "shoes"
      },
      {
        "male": true,
        "date": "1/4/2017",
        "item": "hat"
      },
      {
        "female": true,
        "date": "1/1/2016",
        "item": "shirt"
      }
    ]
  }
}

<!-- Resulting HTML -->
<p>2/1/2018</p>
<p>1/4/2017</p>
<p>chemise</p>

Création de contenu dynamique avec des parties dynamiques 1

<!-- Template -->
{{#each user.story}}
   {{#if this.male}}
      {{#if this.date}}
         <p>{{this.date}}</p>
      {{/if}}
      {{#if this.item}}
         <p>{{this.item}}</p>
      {{/if}}
   {{else if this.female}}
      {{#if this.date}}
         <p>{{this.date}}</p>
      {{/if}}
      {{#if this.item}}
         <p>{{this.item}}</p>
      {{/if}}
   {{/if}}
{{/each}}

// Données de test
{
  "user": {
    "story": [
      {
        "male": true,
        "date": "2/1/2018",
        "item": "shoes"
      },
      {
        "male": true,
        "date": "1/4/2017"
      },
      {
        "female": true,
        "item": "shirt"
      }
    ]
  }
}

<!-- Resulting HTML -->
<p>2/1/2018</p>
<p>chaussures</p>
<p>1/4/2017</p>
<p>chemise</p>

Création de contenu dynamique avec des parties dynamiques 2

<!-- Template -->
{{#if people}}
   <p>Individus :</p>
   {{#each people}}
      <p>{{this.name}}</p>
   {{/each}}
{{/if}}

// Données de test
{
  "people": [{ "name": "Bob" }, { "name": "Sally" }]
}

<!-- Resulting HTML -->
<p>Individus :</p>
<p>Bob</p>
<p>Sally</p>

Ressources supplémentaires

Besoin d'aide ?

Ça arrive à tout le monde. Obtenez de l'aide dès maintenant auprès de l'Équipe d'assistance Twilio SendGrid.

Vous faites face à un problème de code ? Appuyez-vous sur la sagesse collective en parcourant le tag SendGrid sur Stack Overflow ou en visitant le collectif Stack Overflow de Twilio.

Besoin d'aide ?

Merci pour vos commentaires!

Merci pour vos commentaires !