Estoy usando la biblioteca de plantillas Moustache e intento generar una lista separada por comas sin una coma al final, por ejemplo

rojo verde azul

Crear una lista con la coma final es sencillo, dada la estructura

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

y la plantilla

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

esto se resolverá

rojo verde azul,

Sin embargo, no veo una forma elegante de expresar el caso sin la coma al final. Siempre puedo generar la lista en código antes de pasarla a la plantilla, pero me preguntaba si la biblioteca ofrece un enfoque alternativo, como permitirle detectar si es el último elemento de una lista dentro de la plantilla.

Hrm, dudoso, la demostración de bigote prácticamente le muestra, con la firstpropiedad, que debe tener la lógica dentro de los datos JSON para averiguar cuándo poner la coma.

Entonces, sus datos se verían así:

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

y tu plantilla

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

Sé que no es elegante, pero como han mencionado otros, Moustache es muy liviano y no ofrece tales características.

Creo que una mejor forma es cambiar el modelo de forma dinámica. Por ejemplo, si está utilizando JavaScript:

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

y en su plantilla, use la sección invertida:

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

para representar esa coma.

Haz trampa y usa CSS.

Si tu modelo es:

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

luego haz tu plantilla

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

y agregue un poco de CSS

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

Supongo que alguien dirá que este es un mal caso de poner marcado en la presentación, pero no creo que lo sea. La separación de valores por comas es una decisión de presentación para facilitar la interpretación de los datos subyacentes. Es similar a alternar el color de la fuente en las entradas.

Si está usando jmustache , puede usar las variables especiales -firsto -last:

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

No puedo pensar en muchas situaciones en las que quieras enumerar un número desconocido de elementos fuera de <ul>o <ol>, pero así es como lo harías:

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

…Producirá:

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

Esto es Handlebars, eso sí. @indexfuncionará si testes una matriz.

La pregunta de si Moustache ofrece una forma elegante de hacer esto ha sido respondida, pero se me ocurrió que la forma más elegante de hacerlo podría ser usar CSS en lugar de cambiar el modelo.

Modelo:

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

CSS:

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

Esto funciona en IE8 + y otros navegadores modernos.

No hay una forma incorporada de hacer esto en Moustache. Tienes que modificar tu modelo para admitirlo.

Una forma de implementar esto en la plantilla es usar la {{^last}} {{/last}}etiqueta de sombrero de selección invertida . Solo omitirá el texto del último elemento de la lista.

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

O puede agregar una cadena delimitadora ", "al objeto, o idealmente la clase base si está usando un lenguaje que tiene herencia, luego establezca "delimitador" en una cadena vacía " "para el último elemento como este:

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

Para datos JSON sugiero:

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

La expresión regular eliminará todo lo que ,quede pendiente después de las últimas propiedades.

Esto también eliminará ,de los valores de cadena que continúan ",}" o ",]", así que asegúrese de saber qué datos se colocarán en su JSON

Como la pregunta es:

¿Existe una forma elegante de expresar una lista separada por comas sin la coma final?

Luego, cambiar los datos, cuando ser el último elemento ya está implícito al ser el elemento final de la matriz, no es elegante.

Cualquier lenguaje de plantillas de bigote que tenga índices de matriz puede hacer esto correctamente. es decir. sin agregar nada a los datos . Esto incluye manubrios, ractive.js y otras implementaciones populares de bigote.

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

La forma más sencilla que encontré fue renderizar la lista y luego eliminar el último carácter.

1. Render bigote.
2. Elimina cualquier espacio en blanco antes y después de la cuerda.

3. Luego elimine el último carácter

   let renderingData = Moustache Render (dataToRender, datos); renderingData = (renderingData.trim ()). substring (0, renderingData.length-1)

En caso de que usar Handlebars sea una opción, que amplía las capacidades de Moustache, puede usar una variable @data:

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

Más información: http://handlebarsjs.com/reference.html#data

Interesante. Sé que es un poco perezoso, pero por lo general lo soluciono creando plantillas en la asignación de valor en lugar de tratar de delimitar los valores por comas.

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

Tiendo a pensar que esta es una tarea muy adecuada para CSS (como respondieron otros). Sin embargo, asumiendo que está intentando hacer algo como producir un archivo CSV, no tendría HTML y CSS disponibles. Además, si está considerando modificar los datos para hacer esto de todos modos, esta puede ser una forma más ordenada de hacerlo:

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 está usando java, puede usar lo siguiente:

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());

Sé que esta es una pregunta antigua, pero aún quería agregar una respuesta que proporcione otro enfoque.

Respuesta principal

Moustache admite lambdas, ( ver documentación ) por lo que se puede escribir de esta manera:

Modelo:

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

Picadillo:

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

Salida:

rojo verde azul

Comentario

Personalmente, me gusta este enfoque sobre los demás, ya que en mi humilde opinión, el modelo solo debe especificar qué se representa y no cómo se representa. Técnicamente, la lambda es parte del modelo, pero la intención es mucho más clara.

Utilizo este enfoque para escribir mis propios generadores OpenApi. Allí, Moustache está envuelto por Java, pero la funcionalidad es prácticamente la misma. Así es como se ve la creación de lambdas para mí: (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())
            })

En escenarios más complejos, un modelo de vista es deseable por muchas razones. Representa los datos del modelo de una manera más adecuada para la visualización o, en este caso, el procesamiento de plantillas.

En caso de que esté utilizando un modelo de vista, puede representar listas fácilmente de una manera que facilite su objetivo.

Modelo:

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

Ver modelo:

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

La segunda representación de la lista es horrible de escribir, pero extremadamente sencilla de crear a partir del código. Mientras mapea su modelo al modelo de vista, simplemente reemplace todas las listas que necesite firsty lastpara con esta representación.

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
}

En el caso de listas ilimitadas, también puede establecer firsty omitir last, ya que una de ellas es suficiente para evitar la coma al final.

Utilizando first:

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

Usando last:

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

Estoy usando funciones personalizadas para eso, en mi caso cuando trabajo con consultas SQL dinámicas.

    $(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", "[email protected]"],
      ["Donald", "Duck", "[email protected]"],
      ["Anonymous", "Anonymous","[email protected]"]
    ];

    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/