106 votes

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 ?

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.

2voto

mikemaccana Points 7470

Comme la question est :

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

Changer les données - lorsque le dernier élément est déjà implicite en étant le dernier élément du tableau - n'est pas élégant.

N'importe quel langage de template Mustache qui dispose d'indices de tableau peut le faire correctement, c'est-à-dire sans ajouter quoi que ce soit aux données. Cela inclut handlebars, ractive.js et d'autres implémentations populaires de Mustache.

{{# names:index}}
    {{ . }}{{ #if index < names.length - 1 }}, {{ /if }}
{{ / }}

2voto

yeoman Points 212

Dans des scénarios plus complexes, un modèle de vue est souhaitable pour de nombreuses raisons. Il représente les données du modèle d'une manière mieux adaptée à l'affichage ou, dans ce cas, au traitement de modèle.

Dans le cas où vous utilisez un modèle de vue, vous pouvez facilement représenter des listes d'une manière qui facilite votre objectif.

Modèle:

{
    name: "Richard",
    numbers: [1, 2, 3]
}

Modèle de Vue:

{
    name: "Richard",
    numbers: [
        { first: true, last: false, value: 1 },
        { first: false, last: false, value: 2 },
        { first: false, last: true, value: 3 }
    ]
}

La deuxième représentation de liste est horrible à taper mais extrêmement facile à créer à partir du code. En faisant correspondre votre modèle au modèle de vue, remplacez simplement chaque liste dont vous avez besoin avec first et last pour cette représentation.

function annotatedList(values) {
    let result = []
    for (let index = 0; index < values.length; ++index) {
        result.push({
            first: index == 0,
            last: index == values.length - 1,
            value: values[index]
        })
    }
    return result
}

Dans le cas de listes non bornées, vous pouvez également définir uniquement first et omettre last, car l'un d'eux est suffisant pour éviter la virgule de séparation.

Utilisation de first:

{{#numbers}}{{^first}}, {{/first}}{{value}}{{/numbers}}

Utilisation de last:

{{#numbers}}{{value}}{{^last}}, {{/last}}{{/numbers}}

1voto

La manière la plus simple que j'ai trouvée était de rendre la liste puis de supprimer le dernier caractère.

  1. Rendre la moustache.
  2. Supprimer les espaces blancs avant et après la chaîne.
  3. Ensuite, supprimez le dernier caractère

    let renderedData = Mustache Render(dataToRender, data); renderedData=(renderedData.trim()).substring(0, renderedData.length-1)

0voto

Iwnnay Points 21

Intéressant. Je sais que c'est un peu paresseux mais je contourne généralement cela en utilisant un modèle dans l'assignation de valeur plutôt que d'essayer de délimiter les valeurs par des virgules.

var global.items = {};
{{#items}}
    global.items.{{item_name}} = {{item_value}};
{{/items}}

0voto

Kavius Points 197

Je suis d'avis que c'est une tâche bien adaptée à CSS (comme l'ont répondu d'autres personnes). Cependant, en supposant que vous essayez de faire quelque chose comme produire un fichier CSV, vous n'auriez pas accès à HTML et CSS. De plus, si vous envisagez de modifier les données de toute façon, voici peut-être une manière plus propre de le faire:

var data = {
  "items": [
    {"name": "red"},
    {"name": "green"},
    {"name": "blue"}
  ]
};

// cloner les données originales
// Pas strictement nécessaire, mais parfois
// utile de préserver l'objet original
var model = JSON.parse(JSON.stringify(data));

// extraire les valeurs dans un tableau et les joindre
// avec des virgules comme délimiteur
model.items = Object.values(model.items).join(',');

var html = Mustache.render("{{items}}", model);

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X