Ich verwende die Moustache-Vorlagenbibliothek und versuche, eine durch Kommas getrennte Liste ohne ein nachfolgendes Komma zu erstellen, z

rot grün blau

Das Erstellen einer Liste mit dem nachfolgenden Komma ist angesichts der Struktur unkompliziert

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

und die Vorlage

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

Dies wird zu lösen

rot grün blau,

Ich kann jedoch keine elegante Art sehen, den Fall ohne das nachfolgende Komma auszudrücken. Ich kann die Liste immer im Code generieren, bevor ich sie an die Vorlage übergebe. Ich habe mich jedoch gefragt, ob die Bibliothek einen alternativen Ansatz bietet, z. B. das Erkennen, ob es sich um das letzte Element in einer Liste in der Vorlage handelt.

Hrm, zweifelhaft, die Schnurrbart-Demo zeigt Ihnen ziemlich genau, mit demfirst Eigenschaft , dass Sie die Logik in den JSON-Daten haben müssen, um herauszufinden, wann das Komma gesetzt werden muss.

Ihre Daten würden also ungefähr so ​​aussehen:

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

und Ihre Vorlage

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

Ich weiß, dass es nicht elegant ist, aber wie von anderen erwähnt, ist Moustache sehr leicht und bietet keine solchen Funktionen.

Ich denke, ein besserer Weg ist es, das Modell dynamisch zu ändern. Wenn Sie beispielsweise JavaScript verwenden:

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

Verwenden Sie in Ihrer Vorlage den umgekehrten Abschnitt:

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

um dieses Komma zu rendern.

Cheat und benutze CSS.

Wenn Ihr Modell ist:

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

Dann machen Sie Ihre Vorlage

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

und fügen Sie ein wenig CSS hinzu

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

Ich vermute, jemand wird sagen, dass dies ein schlechter Fall ist, wenn Markups in die Präsentation eingefügt werden, aber ich denke nicht, dass dies der Fall ist. Durch Kommas getrennte Werte sind eine Präsentationsentscheidung, um die Interpretation der zugrunde liegenden Daten zu vereinfachen. Es ähnelt dem Abwechseln der Schriftfarbe bei Einträgen.

Wenn Sie zufällig jmustache verwenden , können Sie das Special -firstoder die -lastVariablen verwenden:

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

Ich kann mir nicht viele Situationen vorstellen, in denen Sie eine unbekannte Anzahl von Elementen außerhalb eines <ul>oder auflisten möchten <ol>, aber so würden Sie es tun:

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

…wird herstellen:

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

Das ist wohlgemerkt Lenker. @indexfunktioniert, wenn testes sich um ein Array handelt.

Die Frage, ob Moustache eine elegante Möglichkeit bietet, dies zu tun, wurde beantwortet, aber mir ist der Gedanke gekommen, dass die eleganteste Möglichkeit dies sein könnte, CSS zu verwenden, anstatt das Modell zu ändern.

Vorlage:

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

CSS:

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

Dies funktioniert in IE8 + und anderen modernen Browsern.

In Moustache gibt es keine integrierte Möglichkeit, dies zu tun. Sie müssen Ihr Modell ändern, um es zu unterstützen.

Eine Möglichkeit, dies in der Vorlage zu implementieren, besteht darin, das invertierte Auswahlhut- {{^last}} {{/last}}Tag zu verwenden. Es wird nur Text für das letzte Element in der Liste weggelassen.

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

Sie können ", "dem Objekt auch eine Trennzeichenfolge oder im Idealfall die Basisklasse hinzufügen , wenn Sie eine vererbte Sprache verwenden, und dann "Trennzeichen" " "für das letzte Element wie folgt auf eine leere Zeichenfolge setzen :

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

Für JSON-Daten schlage ich vor:

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

Der reguläre Ausdruck entfernt alle ,nach den letzten Eigenschaften hängen gebliebenen Elemente .

Dadurch werden auch ,Zeichenfolgenwerte entfernt, die ",}" oder ",]" enthalten. Stellen Sie daher sicher, dass Sie wissen, welche Daten in Ihren JSON-Code eingefügt werden

Da ist die Frage:

Gibt es eine elegante Möglichkeit, eine durch Kommas getrennte Liste ohne das nachfolgende Komma auszudrücken?

Dann ist das Ändern der Daten - wenn das letzte Element bereits impliziert ist, weil es das letzte Element im Array ist - nicht elegant.

Jede Schnurrbart-Vorlagensprache mit Array-Indizes kann dies ordnungsgemäß ausführen. dh. ohne etwas zu den Daten hinzuzufügen . Dies umfasst Lenker, ractive.js und andere beliebte Schnurrbartimplementierungen.

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

Verwenden Sie eine @ data-Variable, da Moustache am Lenker steht. Ich fand das die sauberste Option:

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

Weitere Informationen: http://handlebarsjs.com/reference.html#data

Der einfachste Weg, den ich gefunden habe, war, die Liste zu rendern und dann das letzte Zeichen zu entfernen.

1. Schnurrbart rendern.
2. Entfernen Sie alle Leerzeichen vor und nach der Zeichenfolge.

3. Entfernen Sie dann das letzte Zeichen

   let renderedData = Moustache Render (dataToRender, data); renderedData = (renderingData.trim ()). Teilzeichenfolge (0, renderedData.length-1)

Interessant. Ich weiß, dass es etwas faul ist, aber ich komme normalerweise darum herum, indem ich die Wertzuweisung vorlege, anstatt zu versuchen, die Werte durch Kommas abzugrenzen.

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

Ich neige dazu zu denken, dass dies eine Aufgabe ist, die gut für CSS geeignet ist (wie von anderen beantwortet). Angenommen, Sie versuchen beispielsweise, eine CSV-Datei zu erstellen, stehen Ihnen HTML und CSS nicht zur Verfügung. Wenn Sie in Betracht ziehen, Daten zu ändern, um dies trotzdem zu tun, ist dies möglicherweise eine übersichtlichere Methode:

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

Wenn Sie Java verwenden, können Sie Folgendes verwenden:

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

Ich weiß, dass dies eine alte Frage ist, aber ich wollte trotzdem eine Antwort hinzufügen, die einen anderen Ansatz bietet.

Hauptantwort

Moustache unterstützt Lambdas ( siehe Dokumentation ), so dass man es so schreiben kann:

Vorlage:

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

Hash:

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

Ausgabe:

rot grün blau

Kommentar

Persönlich mag ich diesen Ansatz gegenüber den anderen, da das Modell meiner Meinung nach nur angeben sollte, was gerendert wird und nicht, wie es gerendert wird. Technisch gesehen ist das Lambda Teil des Modells, aber die Absicht ist viel klarer.

Ich benutze diesen Ansatz, um meine eigenen OpenApi-Generatoren zu schreiben. Dort wird Moustache von Java umhüllt, aber die Funktionalität ist ziemlich gleich. So sieht es für mich aus, Lambdas zu kreieren: (in 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())
            })