Comment faire du texte itérer avec le tableau de catégories

Question

Dans le centre d'aide de Zendesk, il y a l'utilisation des tableaux handlebar.js.

Je n'ai pas trouvé un moyen d'y accéder autrement qu'en les appelant en utilisant la syntaxe du guidon.

Je souhaite ajouter des icônes à ce tableau, de manière à utiliser une icône différente en fonction du nom de la catégorie. Voici mon extrait de code:

{{#each categories}} 
     <li> 
      <!-- Catergories Array --> 
      <i class="fa fa-graduation-cap fa-4x" aria-hidden="true" style="padding-top:30px;"> </i> 
      <p> 
      <a href="{{url}}">{{name}}</a> 
      </li> 
     {{/each}} 

Ici vous pouvez voir le tableau des catégories est appelée, où il est placé dans une nouvelle ligne. J'ai ajouté la casquette impressionnante de graduation de police que je veux utiliser pour la catégorie de tutoriels que j'ai créée dans l'éditeur.

Sur la ligne 6, les liens sont appelés par rapport à la position dans le tableau. L'url et le nom itèrent ensemble. Je ne peux cependant pas ajouter un symbole génial de police au nom, et je ne peux pas l'itérer en le mettant en dehors des doubles boucliers.

J'ai regardé dans le javascript et dans le CSS et il n'y a aucune référence aux catégories où je peux modifier des éléments de données du tableau (sinon je pourrais facilement ajouter un élément d'icône).

Est-ce que quelqu'un a de l'expérience dans la création de centres d'aide zendesk personnalisés?

Answer 1

Je ne suis pas sûr de comprendre la question, mais pouvez-vous transformer le nom en html nécessaire pour afficher l'icône? Si cela ne fonctionne pas, vous pouvez ajouter un bool à votre objet qui indique si l'élément du tableau contient une icône au lieu d'un nom et modifier conditionnellement le code HTML affiché.

{{#if is_icon}} 
    <a href="{{url}}"><i class="{{icon-class}}"></i></a> 
{{else}} 
    <a href="{{url}}">{{name}}</a> 
{{/if}}