En Mustache templating, y a-t-il un moyen élégant d'exprimer une liste séparée par des virgules sans la virgule finale ?

Question

Je suis en train d'utiliser la bibliothèque de modèles Mustache et j'essaie de générer une liste séparée par des virgules sans virgule finale, par exemple

rouge, vert, bleu

Créer une liste avec la virgule finale est simple, étant donné la structure

{
  "items": [
    {"name": "rouge"},
    {"name": "vert"},
    {"name": "bleu"}
  ]
}

et le modèle

{{#items}}{{name}}, {{/items}}

ceci se traduira par

rouge, vert, bleu,

Cependant, je ne vois pas de moyen élégant d'exprimer le cas sans la virgule finale. Je peux toujours générer la liste dans le code avant de la passer dans le modèle, mais je me demandais si la bibliothèque offre une approche alternative, comme vous permettre de détecter s'il s'agit du dernier élément dans une liste dans le modèle.

Answer 1

Je ne peux pas penser à beaucoup de situations où vous voudriez lister un nombre inconnu d'éléments en dehors d'une balise

ou

, mais voici comment vous le feriez :

    Liste séparée par des virgules, sous forme de phrase ;
    {{#each test}}{{#if @index}}, {{/if}}{{.}}{{/each}};
    phrase continuée.

...produira :

Liste séparée par des virgules, sous forme de phrase; asdf1, asdf2, asdf3; phrase continuée.

Ceci est Handlebars, gardez à l'esprit. @index fonctionnera si test est un Array.

Answer 2

Il n'y a pas de moyen intégré pour le faire en Mustache. Vous devez modifier votre modèle pour le prendre en charge.

Une façon d'implémenter cela dans le modèle est d'utiliser le chapeau de sélection inversé {{^last}} {{/last}}. Cela ne s'affichera que pour le dernier élément dans la liste.

{{#items}}
    {{name}}{{^last}}, {{/last}}
{{/items}}

Ou vous pouvez ajouter une chaîne de délimitation comme ", " à l'objet, ou idéalement à la classe de base si vous utilisez un langage qui a l'héritage, puis définir "delimiter" comme une chaîne vide " " pour le dernier élément comme ceci:

{{#items}}
    {{name}}{{delimiter}}
{{/items}}

Answer 3

La question de savoir si Mustache offre une façon élégante de le faire a été répondue, mais il m'est apparu que la manière la plus élégante de le faire pourrait être d'utiliser CSS plutôt que de changer le modèle.

Modèle :

{{#items}}{{name}}{{/items}}

CSS :

.csl li
{
    display: inline;
}
.csl li:before
{
    content: ", "
}
.csl li:first-child:before
{
    content: ""
}

Ceci fonctionne dans IE8+ et d'autres navigateurs modernes.

Answer 4

Pour les données JSON, je suggère:

Mustache.render(template, settings).replace(/,(?=\s*[}\]])/mig,'');

L'expression régulière enlèvera tout , restant après les dernières propriétés.

Cela enlèvera également les , des valeurs de chaîne contenant ", }" ou ", ]" alors assurez-vous de connaître les données qui seront placées dans votre JSON

Answer 5

Si l'utilisation de Handlebars est une option, ce qui étend les capacités de Mustache, vous pourriez utiliser une variable @data :

{{#if @last}}, {{/if}}

Plus d'informations : http://handlebarsjs.com/reference.html#data