You are viewing the French site, but your language preference is set to English. Switch to English site →

Utilisation de Handlebars

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

La syntaxe Handlebars vous permet de personnaliser les messages de vos modèles en insérant les noms des clients et d'autres données pour rendre un e-mail pertinent pour chaque destinataire. Par exemple, si vous avez un nom de client stocké dans une propriété JSON appelée "name", vous pouvez insérer la valeur de la propriété dans un modèle en ajoutant {{ name }} où vous voulez que le nom du client apparaisse.

La syntaxe Handlebars permet à tous ces modèles dynamiques de se produire en dehors de votre base de code, ce qui signifie que les modifications sont effectuées rapidement dans le modèle sans qu'aucune mise à jour d'une base de code ne soit nécessaire.

Si vous préférez utiliser votre propre système de modélisation, vous pouvez toujours insérer des données dynamiques à l'aide de balises de substitution.

Vous pouvez gérer vos modèles par programmation avec notre API d'envoi d'e-mails avec modèles transactionnels dynamiques.

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

Pour une référence complète, reportez-vous à la référence Handlebars sur cette page.

Cas d'usage

Les exemples d'utilisation suivants proviennent de la section Dynamic-template de notre référentiel de modèles d'e-mail GitHub. Chaque exemple est lié à des fichiers que vous pouvez explorer sur GitHub. Vous pouvez également utiliser ces modèles en les téléchargeant à l'aide de l'éditeur de code disponible dans les modèles transactionnels dynamiques et de la librairie de conception des Campagnes Marketing.

Les cas d'utilisation suivants sont répertoriés avec les assistants Handlebars utilisés pour les fabriquer.

Reçu

Ce modèle d'exemple de reçu utilise les assistants suivants :

Mot de passe réinitialisé

Ce modèle transactionnel d'exemple utilise les assistants suivants :

Plusieurs langues

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

Newsletter

Ce modèle d'exemple de newsletter utilise les assistants suivants :

Publicité

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

Référence Handlebars

La référence suivante fournit des exemples de blocs de code pour chaque assistant, y compris des extraits d'e-mail HTML et des données de test JSON. Les exemples de code sont présentés dans trois onglets. Le premier onglet, Handlebars, montre l'étiquette du même nom. Le deuxième onglet, JSON, montre des exemples de données qui seraient utilisées pour remplir le repère Handlebars. Le troisième onglet, HTML, montre le résultat final sur lequel la balise Handlebars sera affichée dans votre e-mail. Vous pouvez cliquer sur chaque onglet pour basculer entre les exemples de code.

Substitution

Les modèles Twilio SendGrid prennent en charge les substitutions suivantes :

Remplacement de base

<!-- Template -->
<p>Bonjour {{ firstName }}</p>
// Données de test
{ "firstName": "Ben" }
<!-- Resulting HTML !-->
<p>Bonjour Ben</p>

Remplacement d'objet approfondi

<!-- Template -->
<p>Bonjour {{user.profile.firstName}}</p>
// Données de test
{
  "user": {
    "profile": {
      "firstName": "Ben"
    }
  }
}
<!-- Resulting HTML -->
<p>Bonjour Ben</p>

Échec de l'objet

<!-- Template -->
<p>Bonjour {{user.profile.firstName}}</p>
// Donné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 caractè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>
// Donné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 spécifiez à l'aide des jetons du tableau suivant. Si vous envoyez un champ de date sans le convertir, il sera affiché au format ISO8601 avec l'horodatage complet (par exemple, 2020-01-01T23:00:00.000Z). Les exemples de résultats d'affichage suivants concernent le mardi 1er janvier, 2020 à 15h00, heure du Pacifique.

Jeton Résultat affiché
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>
// Donné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 à 11h</p>

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

Insérer

<!-- Insert with a default value -->
<p>Bonjour, {{insert name "default=Customer"}} ! Merci de nous avoir contactés à propos de {{insert businessName "your business"}}.</p>
// Données de test avec toutes les valeurs
{
   "name": "Ben",
   "businessName": "Twilio SendGrid"
}

// Données de test avec valeur manquante
{
  "name": "Ben"
}
<!-- Resulting HTML with all values -->
<p>Bonjour Ben ! Merci de nous avoir contactés au sujet de Twilio SendGrid.</p>

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

Déclarations conditionnelles

Les modèles Twilio SendGrid prennent en charge les conditions suivantes :

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}}
// Données de test numéro un
{
   "user":{
      "profile":{
         "male":true
      }
   }
}

// Données de test numéro deux
{
   "user":{
      "profile":{
         "female":true
      }
   }
}

// Données de test numé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}}
// Donné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}}
// Donné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}}
    Félicitations, vous avez obtenu le meilleur score aujourd'hui !
{{/greaterThan}}
 Merci d'avoir joué.
</p>
// Données de test numéro un
{
  "scoreOne": 100,
  "scoreTwo": 78
}

// Données de test numéro deux
{
  "scoreOne": 55,
  "scoreTwo": 78
}
<!-- Resulting HTML from test data one-->
<p>
  Bonjour Ben ! Félicitations, vous avez obtenu le meilleur score aujourd'hui ! Merci d'avoir joué.
</p>

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

greaterThan with else

<!-- Template -->
<p>
Bonjour Ben !
{{#greaterThan scoreOne scoreTwo}}
    Félicitations, vous avez obtenu le meilleur score aujourd'hui !
{{else}}
    Vous y étiez presque, mais vous n'avez pas obtenu le meilleur score aujourd'hui.
{{/greaterThan}}
 Merci d'avoir joué.
</p>
// Données de test numéro un
{
  "scoreOne": 100,
  "scoreTwo": 78
}

// Données de test numéro deux
{
  "scoreOne": 55,
  "scoreTwo": 78
}
<!-- Resulting HTML from test data one-->
<p>
  Bonjour Ben ! Félicitations, vous avez obtenu le meilleur score aujourd'hui ! Merci d'avoir joué.
</p>

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

lessThan

Basic lessThan

<!-- Template -->
<p>
Bonjour Ben !
{{#lessThan scoreOne scoreTwo}}
    Vous y étiez presque, mais vous n'avez pas obtenu le meilleur score aujourd'hui.
{{/lessThan}}
 Merci d'avoir joué.
</p>
// Données de test numéro un
{
  "scoreOne": 55,
  "scoreTwo": 78
}

// Données de test numéro deux
{
  "scoreOne": 100,
  "scoreTwo": 78
}
<!-- Resulting HTML from test data one-->
<p>
  Bonjour Ben ! Vous y étiez presque, mais vous n'avez pas obtenu le meilleur score aujourd'hui. Merci d'avoir
  joué.
</p>

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

lessThan with else

<!-- Template -->
<p>
Bonjour Ben !
{{#lessThan scoreOne scoreTwo}}
    Vous y étiez presque, mais vous n'avez pas obtenu le meilleur score aujourd'hui.
{{else}}
    Félicitations, vous avez obtenu le meilleur score aujourd'hui !
{{/lessThan}}
 Merci d'avoir joué.
</p>
// Données de test numéro un
{
  "scoreOne": 55,
  "scoreTwo": 78
}

// Données de test numéro deux
{
  "scoreOne": 100,
  "scoreTwo": 78
}
<!-- Resulting HTML from test data one-->
<p>
  Bonjour Ben ! Vous y étiez presque, mais vous n'avez pas obtenu le meilleur score aujourd'hui. Merci d'avoir
  joué.
</p>

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

Equals

La comparaison equals peut vérifier l'égalité entre deux valeurs du même type de données. L'assistant equals tentera également de contraindre les types de données pour faire une comparaison des valeurs indépendamment de leur type de données. Par exemple, {{#equals 3 "3"}} sera évalué à true.

Veuillez noter que la page Preview (Aperçu) de l'éditeur n'affichera pas correctement les résultats d'une comparaison entre les valeurs contraintes. Vous verrez les comparaisons appropriées entre les valeurs contraintes uniquement dans un message transmis.

Lors de la vérification de la véracité, sachez que les chaînes vides, les entiers zéro et les nombres à virgule flottante zéro sont évalués à false. Les chaînes non vides, les entiers non nuls et les nombres à virgule flottante non nuls, y compris les nombres négatifs, sont évalués à true.

Basic equals

<!-- Template -->
<p>
Bonjour Ben !
{{#equals customerCode winningCode}}
    Vous avez un code gagnant.
{{/equals}}
 Merci d'avoir joué.
</p>
// Données de test numéro un
{
  "customerCode": 289199,
  "winningCode": 289199
}

// Données de test numéro deux
{
  "customerCode": 167320,
  "winningCode": 289199
}
<!-- Resulting HTML from test data one-->
<p>Bonjour Ben ! Vous avez un code gagnant. Merci d'avoir joué.</p>

<!-- Resulting HTML from test data two-->
<p>Bonjour Ben ! Merci d'avoir joué.</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 joué.
</p>
// Données de test numéro un
{
  "customerCode": 289199,
  "winningCode": 289199
}

// Données de test numéro deux
{
  "customerCode": 167320,
  "winningCode": 289199
}
<!-- Resulting HTML from test data one-->
<p>Bonjour Ben ! Vous avez un code gagnant. Merci d'avoir joué.</p>

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

notEquals

La comparaison notEquals peut vérifier l'égalité entre deux valeurs du même type de données. L'assistant notEquals tentera également de contraindre les types de données pour faire une comparaison des valeurs indépendamment de leur type de données. Par exemple, {{#equals 3 "3"}} renvoie false.

Lors de la vérification de la véracité, sachez que les chaînes vides, les entiers zéro et les nombres à virgule flottante zéro sont évalués à false. Les chaînes non vides, les entiers non nuls et les nombres à virgule flottante non nuls, y compris les nombres négatifs, sont évalués à true.

Basic notEquals

<!-- Template -->
<p>
Bonjour Ben !
{{#notEquals customerCode winningCode}}
    Vous avez un code gagnant.
{{/notEquals}}
 Merci d'avoir joué.
</p>
// Données de test numéro un
{
  "customerCode": 289199,
  "winningCode": 289199
}

// Données de test numéro deux
{
  "customerCode": 167320,
  "winningCode": 289199
}
<!-- Resulting HTML from test data one-->
<p>Bonjour Ben ! Vous avez un code gagnant. Merci d'avoir joué.</p>

<!-- Resulting HTML from test data two-->
<p>Bonjour Ben ! Merci d'avoir joué.</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 joué.
</p>
// Données de test numéro un
{
  "customerCode": 289199,
  "winningCode": 289199
}

// Données de test numéro deux
{
  "customerCode": 167320,
  "winningCode": 289199
}
<!-- Resulting HTML from test data one-->
<p>Bonjour Ben ! Vous avez un code gagnant. Merci d'avoir joué.</p>

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

And

Lors de la vérification de la véracité, sachez que les chaînes vides, les entiers zéro et les nombres à virgule flottante zéro sont évalués à false. Les chaînes non vides, les entiers non nuls et les nombres à virgule flottante non nuls, y compris les nombres négatifs, sont évalués à true.

And without else

<!-- Template -->
<p>
Bonjour Ben !
{{#and favoriteFood favoriteDrink}}
   Merci de nous avoir fait part de vos préférences en matière de repas.
{{/and}}.
 Nous avons hâte de vous envoyer d'autres recettes délicieuses.</p>
// Données de test numéro un
{
  "favoriteFood": "Pasta",
  "favoriteDrink": ""
}

// Données de test numéro deux
{
  "favoriteFood": "Pasta",
  "favoriteDrink": "Coffee"
}
<!-- Resulting HTML from test data one -->
<p>Bonjour Ben ! Nous avons hâte de vous envoyer d'autres recettes délicieuses.</p>

<!-- Resulting HTML from test data two -->
<p>
  Bonjour Ben ! Merci de nous avoir fait part de vos préférences en matière de repas. Nous avons hâte
  de vous envoyer d'autres recettes délicieuses.
</p>

And with else

<!-- Template -->
<p>
Bonjour Ben !
{{#and favoriteFood favoriteDrink}}
   Merci de nous avoir fait part de vos préférences en matière de repas.
{{else}}
   Si vous avez terminé de répondre au questionnaire sur vos préférences en matière de repas, nous pouvons vous proposer des recettes qui vous intéressent le plus.
{{/and}}.
 Nous avons hâte de vous envoyer d'autres recettes délicieuses.</p>
// Données de test numéro un
{
  "favoriteFood": "Pasta",
  "favoriteDrink": ""
}

// Données de test numéro deux
{
  "favoriteFood": "Pasta",
  "favoriteDrink": "Coffee"
}
<!-- Resulting HTML from test data one -->
<p>
  Bonjour Ben ! Si vous avez terminé de répondre au questionnaire sur vos préférences en matière de restaurants, nous pouvons
  vous fournir des recettes qui devraient vous intéresser. Nous avons hâte
  de vous envoyer d'autres recettes délicieuses.
</p>

<!-- Resulting HTML from test data two -->
<p>
  Bonjour Ben ! Merci de nous avoir fait part de vos préférences en matière de repas. Nous avons hâte
  de vous envoyer d'autres recettes délicieuses.
</p>

Or

Lors de la vérification de la véracité, sachez que les chaînes vides, les entiers zéro et les nombres à virgule flottante zéro sont évalués à false. Les chaînes non vides, les entiers non nuls et les nombres à virgule flottante non nuls, y compris les nombres négatifs, sont évalués à true.

Basic or

<!-- Template -->
<p>
Bonjour Ben !
{{#or isRunner isCyclist}}
   Nous pensons qu'une carte des sentiers de votre région pourrait vous plaire.
{{/or}}.
 Bonne journée.
</p>
// Données de test numéro un
{
  "isRunner": true,
  "isCyclist": false
}

// Données de test numéro deux
{
  "isRunner": false,
  "isCyclist": false
}
// Données de test numéro trois
{
  "isRunner": false,
  "isCyclist": true
}
<!-- Resulting HTML from test data one -->
<p>
  Bonjour Ben ! Nous pensons qu'une carte des sentiers de votre région pourrait vous plaire. Vous trouverez
  la carte jointe à cet e-mail. Bonne journée.
</p>

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

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

Or with else

<!-- Template -->
<p>
Bonjour Ben !
{{#or isRunner isCyclist}}
   Nous pensons qu'une carte des sentiers de votre région pourrait vous plaire. Vous trouverez la carte jointe à cet e-mail.
{{else}}
   Nous aimerions en savoir plus sur les activités de plein air que vous aimez. Le questionnaire ci-dessous ne vous prendra qu'une minute.
{{/or}}.
 Bonne journée.
</p>
// Données de test numéro un
{
  "isRunner": true,
  "isCyclist": false
}

// Données de test numéro deux
{
  "isRunner": false,
  "isCyclist": false
}
// Données de test numéro trois
{
  "isRunner": false,
  "isCyclist": true
}
<!-- Resulting HTML from test data one -->
<p>
  Bonjour Ben ! Nous pensons qu'une carte des sentiers de votre région pourrait vous plaire. Vous trouverez
  la carte jointe à cet e-mail. Bonne journée.
</p>

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

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

Length

L'assistant de longueur renvoie le nombre de caractères d'une chaîne ou d'un tableau donné. Pour les valeurs non-chaîne et non-tableau, la longueur renvoie 0. Length peut être utile en combinaison avec d'autres assistants, comme illustré ci-aprè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 à tout moment pour poursuivre vos achats.
{{else}}
 Merci d'avoir utilisé notre site. Nous espérons vous revoir très bientôt.
{{/greaterThan}}
</p>
// Données de test numéro un
{
  "cartItems": ["raft", "water bottle", "sleeping bag"]
}

// Données de test numéro deux
{
  "cartItems": []
}
<!-- Resulting HTML with test data one-->
<p>
  Bonjour Ben ! Il semble que vous ayez encore des articles dans votre panier. Revenez
  à tout moment pour poursuivre vos achats.
</p>

<!-- Resulting HTML with test data two-->
<p>Bonjour Ben ! Merci d'avoir utilisé notre site. Nous espérons vous revoir très bientôt.</p>

Itérations

Vous pouvez effectuer une boucle ou une itération sur des données à l'aide de la fonction d'assistant {{#each }} pour construire des listes et exécuter d’autres actions de modélisation utiles.

Basic Iterator with each

<!-- Template -->
<ol>
  {{#each user.orderHistory}}
   <li>Vous avez commandé : {{this.item}} on: {{this.date}}</li>
  {{/each}}
</ol>
// Données de test
{
  "user": {
    "orderHistory": [
      {
        "date": "2/1/2018",
        "item": "shoes"
      },
      {
        "date": "1/4/2017",
        "item": "hat"
      }
    ]
  }
}
<!-- Resulting HTML -->
<ol>
  <li>Vous avez commandé : des chaussures le : 2/1/2018</li>
  <li>Vous avez commandé : un chapeau le : 1/4/2017</li>
</ol>

Exemples combinés

Les exemples suivants vous montrent comment combiner plusieurs fonctions Handlebars pour créer un modèle vraiment dynamique.

Cré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}}
// Donné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>

Cré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}}
// Donné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>

Création de contenu dynamique avec des parties dynamiques 2

<!-- Template -->
{{#if people}}
   <p>Individus :</p>
   {{#each people}}
      <p>{{this.name}}</p>
   {{/each}}
{{/if}}
// Données de test
{
  "people": [{ "name": "Bob" }, { "name": "Sally" }]
}
<!-- Resulting HTML -->
<p>Individus :</p>
<p>Bob</p>
<p>Sally</p>

Ressources supplémentaires

Évaluez cette page :

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.

Merci pour vos commentaires!

Veuillez sélectionner la ou les raisons de vos commentaires. Les informations supplémentaires que vous fournissez nous aident à améliorer notre documentation:

Envoi de vos commentaires...
🎉 Merci pour vos commentaires!
Une erreur s'est produite. Veuillez réessayer.

Merci pour vos commentaires !

Recommandez‑nous et gagnez 10 € en 3 étapes simples!

Étape 1

Obtenir le lien

Obtenez un lien de recommandation personnel gratuit ici

Étape 2

Donner 10 €

Votre utilisateur s'inscrit et effectue la mise à niveau en utilisant le lien

Étape 3

Gagner 10 €

1 250 SMS gratuits
OU 1 000 minutes vocales gratuites
OU 12 000 chats
OU plus