J'utilise la bibliothèque de modèles Moustache et j'essaie de générer une liste séparée par des virgules sans virgule de fin, par exemple

rouge, vert, bleu

Créer une liste avec la virgule de fin est simple, compte tenu de la structure

{
  "items": [
    {"name": "red"},
    {"name": "green"},
    {"name": "blue"}
  ]
}

et le modèle

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

cela se résoudra à

rouge, vert, bleu,

Cependant, je ne vois pas de manière élégante d'exprimer la casse sans la virgule de fin. 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 telle que vous permettre de détecter s'il s'agit du dernier élément d'une liste dans le modèle.

Hrm, douteux, la démo de moustache vous montre à peu près, avec la firstpropriété, que vous devez avoir la logique à l'intérieur des données JSON pour savoir quand mettre la virgule.

Ainsi, vos données ressembleraient à quelque chose comme:

{
  "items": [
    {"name": "red", "comma": true},
    {"name": "green", "comma": true},
    {"name": "blue"}
  ]
}

et votre modèle

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

Je sais que ce n'est pas élégant, mais comme mentionné par d'autres, Moustache est très léger et ne fournit pas de telles fonctionnalités.

Je pense qu'une meilleure façon est de changer le modèle de manière dynamique. Par exemple, si vous utilisez JavaScript:

model['items'][ model['items'].length - 1 ].last = true;

et dans votre modèle, utilisez la section inversée:

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

pour rendre cette virgule.

Trichez et utilisez CSS.

Si votre modèle est:

{
  "items": [
    {"name": "red"},
    {"name": "green"},
    {"name": "blue"}
  ]
}

puis faites votre modèle

<div id="someContainer">
{{#items}}
    <span>{{name}}<span>
{{/items}}
</div>

et ajoutez un peu de CSS

#someContainer span:not(:last-of-type)::after {
  content: ", "    
}

Je suppose que quelqu'un dira que c'est un mauvais cas de mise en place d'un balisage dans la présentation, mais je ne pense pas que ce soit le cas. La séparation des valeurs par des virgules est une décision de présentation pour faciliter l'interprétation des données sous-jacentes. C'est similaire à l'alternance de la couleur de la police sur les entrées.

Si vous utilisez jmustache , vous pouvez utiliser les variables spéciales -firstou -last:

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

Je ne peux pas penser à de nombreuses situations dans lesquelles vous voudriez répertorier un nombre inconnu d'éléments en dehors d'un <ul>ou <ol>, mais voici comment procéder:

<p>
    Comma separated list, in sentence form;
    {{#each test}}{{#if @index}}, {{/if}}{{.}}{{/each}};
    sentence continued.
</p>

…produira:

Command separated list, in sentence form; asdf1, asdf2, asdf3; sentence continued.

Ceci est Guidon, remarquez. @indexfonctionnera si testest un tableau.

La question de savoir si Moustache offre une manière élégante de faire cela a été résolue, mais il m'est venu à l'esprit 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:

<ul class="csl">{{#items}}<li>{{name}}</li>{{/items}}</ul>

CSS:

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

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

Il n'y a pas de moyen intégré de faire cela dans Moustache. Vous devez modifier votre modèle pour le supporter.

Une façon d'implémenter cela dans le modèle consiste à utiliser la {{^last}} {{/last}}balise chapeau de sélection inversée . Il omettra uniquement le texte du dernier élément de la liste.

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

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

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

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

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

L'expression régulière supprimera tout ce qui ,reste en suspens après les dernières propriétés.

Cela supprimera également ,de la chaîne les valeurs continuant ",}" ou ",]", alors assurez-vous de savoir quelles données seront placées dans votre JSON

Comme la question est:

Existe-t-il une manière élégante d'exprimer une liste séparée par des virgules sans la virgule de fin?

Ensuite, changer les données - lorsque le fait d'être le dernier élément est déjà implicite en étant l'élément final du tableau - n'est pas élégant.

Tout langage de modèle de moustache qui a des index de tableau peut le faire correctement. c'est à dire. sans rien ajouter aux données . Cela inclut les guidons, ractive.js et d'autres implémentations de moustache populaires.

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

Le moyen le plus simple que j'ai trouvé était de rendre la liste, puis de supprimer le dernier caractère.

1. Rendre la moustache.
2. Supprimez tout espace blanc avant et après la chaîne.

3. Puis supprimez le dernier caractère

   let renduData = Rendu de moustache (dataToRender, données); renduData = (renduData.trim ()). sous-chaîne (0, renduData.longueur-1)

Dans le cas où l'utilisation de Handlebars est une option, qui étend les capacités de Moustache, vous pouvez utiliser une variable @data:

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

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

Intéressant. Je sais que c'est un peu paresseux, mais je contourne généralement cela en créant des modèles dans l'attribution 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}}

J'ai tendance à penser que c'est une tâche bien adaptée au CSS (comme l'ont répondu d'autres). Cependant, en supposant que vous essayez de faire quelque chose comme produire un fichier CSV, vous n'auriez pas de HTML et de CSS à votre disposition. De plus, si vous envisagez de modifier les données pour le faire de toute façon, cela peut être une façon plus ordonnée de le faire:

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

// clone the original data. 
// Not strictly necessary, but sometimes its
// useful to preserve the original object
var model = JSON.parse(JSON.stringify(data));

// extract the values into an array and join 
// the array with commas as the delimiter
model.items = Object.values(model.items).join(',');

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

Si vous utilisez java, vous pouvez utiliser les éléments suivants:

https://github.com/spullara/mustache.java/blob/master/compiler/src/test/java/com/github/mustachejava/util/DecoratedCollectionTest.java

MustacheFactory mf = new DefaultMustacheFactory();
Mustache test = mf.compile(new StringReader("{{#test}}{{#first}}[{{/first}}{{^first}}, {{/first}}\"{{value}}\"{{#last}}]{{/last}}{{/test}}"), "test");
StringWriter sw = new StringWriter();
test.execute(sw, new Object() {
    Collection test = new DecoratedCollection(Arrays.asList("one", "two", "three"));
}).flush();
System.out.println(sw.toString());

Je sais que c'est une vieille question, mais je voulais quand même ajouter une réponse qui propose une autre approche.

Réponse principale

Moustache supporte les lambdas, ( voir documentation ) donc on peut l'écrire de cette façon:

Modèle:

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

Hacher:

    {
      "items": [
        {"name": "red"},
        {"name": "green"},
        {"name": "blue"}
      ]
      "removeTrailingComma": function() {
        return function(text, render) {
          var original = render(text);
          return original.substring(0, original.length - 2);
        }
      }
    }

Production:

rouge, vert, bleu

Commentaire

Personnellement, j'aime cette approche par rapport aux autres, car à mon humble avis, le modèle ne doit spécifier que ce qui est rendu et non comment il est rendu. Techniquement, le lambda fait partie du modèle, mais l'intention est beaucoup plus claire.

J'utilise cette approche pour écrire mes propres générateurs OpenApi. Là, Moustache est enveloppé par Java, mais la fonctionnalité est à peu près la même. Voici à quoi ressemble la création de lambdas pour moi: (en Kotlin)

    override fun addMustacheLambdas(): ImmutableMap.Builder<String, Mustache.Lambda> =
        super.addMustacheLambdas()
            .put("lowerCase", Mustache.Lambda { fragment, writer ->
                writer.write(fragment.execute().toLowerCase())
            })
            .put("removeLastComma", Mustache.Lambda { fragment, writer ->
                writer.write(fragment.execute().removeSuffix(","))
            })
            .put("printContext", Mustache.Lambda { fragment, writer ->
                val context = fragment.context()
                println(context) // very useful for debugging if you are not the author of the model
                writer.write(fragment.execute())
            })

J'utilise des fonctions personnalisées pour cela, dans mon cas lorsque je travaille avec des requêtes SQL dynamiques.

    $(document).ready(function () {
    var output = $("#output");    
    var template = $("#test1").html();
    var idx = 0;
    var rows_count = 0;
    var data = {};
    
    data.columns = ["name", "lastname", "email"];
    data.rows  = [
        ["John", "Wick", "john.wick@hotmail.com"],
      ["Donald", "Duck", "donald.duck@ducks.com"],
      ["Anonymous", "Anonymous","jack.kowalski@gmail.com"]
    ];

    data.rows_lines = function() {
        let rows = this.rows;
      let rows_new = [];
      for (let i = 0; i < rows.length; i++) {
        let row = rows[i].map(function(v) {
            return `'${v}'`
        })
                rows_new.push([row.join(",")]);
      }
      rows_count = rows_new.length;
      return rows_new
    }
    data.last = function() {
        return idx++ === rows_count-1; // omit comma for last record
    }
    
    var html = Mustache.render(template, data);
    output.append(html);

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/4.0.1/mustache.min.js"></script>
<h2>Mustache example: Generate SQL query (last item support - omit comma for last insert)</h2>

<div id="output"></div>

<script type="text/html" id="test1">
    INSERT INTO Customers({{{columns}}})<br/>
    VALUES<br/>
        {{#rows_lines}}
                ({{{.}}}){{^last}},{{/last}}<br/>
      {{/rows_lines}}
</script>

https://jsfiddle.net/tmdoit/4p5duw70/8/

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 qui convient mieux à l'affichage ou, dans ce cas, au traitement du 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]
}

Voir le modèle:

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

La représentation de la deuxième liste est horrible à taper mais extrêmement simple à créer à partir du code. Lors du mappage de votre modèle sur le modèle de vue, remplacez simplement chaque liste dont vous avez besoin firstet lastpour par 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 illimitées, vous pouvez également définir firstet omettre uniquement last, car l'une d'elles suffit pour éviter la virgule de fin.

Utilisation first:

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

Utilisation last:

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