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.
Antworten:
Hrm, zweifelhaft, die Schnurrbart-Demo zeigt Ihnen ziemlich genau, mit dem
first
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:
und Ihre Vorlage
Ich weiß, dass es nicht elegant ist, aber wie von anderen erwähnt, ist Moustache sehr leicht und bietet keine solchen Funktionen.
quelle
first,second,third
.{"name": "blue", "last": 1}
und dann einen invertierten Abschnitt zu verwenden{{#items}} {{name}}{{^last}}, {{/last}} {{/items}}
Ich denke, ein besserer Weg ist es, das Modell dynamisch zu ändern. Wenn Sie beispielsweise JavaScript verwenden:
Verwenden Sie in Ihrer Vorlage den umgekehrten Abschnitt:
um dieses Komma zu rendern.
quelle
Cheat und benutze CSS.
Wenn Ihr Modell ist:
Dann machen Sie Ihre Vorlage
und fügen Sie ein wenig CSS hinzu
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.
quelle
Wenn Sie zufällig jmustache verwenden , können Sie das Special
-first
oder die-last
Variablen verwenden:quelle
{{#something=TEXT}}
)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:…wird herstellen:
Das ist wohlgemerkt Lenker.
@index
funktioniert, wenntest
es sich um ein Array handelt.quelle
{{.}}
.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:
CSS:
Dies funktioniert in IE8 + und anderen modernen Browsern.
quelle
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.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 :quelle
last
. Setzen Sie dann das letzte Element in der Sammlung auflast=true
.config
Dateidarstellung in ein Python-Objekt. Ich vermute, die Konfiguration ist injson
oderxml
, oder ? Bevor Sie es an die Vorlagen-Engine übergeben, rufen Sie das letzte Element der Sammlung ab und wenden Sie dielast
Eigenschaft an.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 werdenquelle
Da ist die Frage:
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.
quelle
if
Verwenden Sie eine @ data-Variable, da Moustache am Lenker steht. Ich fand das die sauberste Option:
Weitere Informationen: http://handlebarsjs.com/reference.html#data
quelle
Der einfachste Weg, den ich gefunden habe, war, die Liste zu rendern und dann das letzte Zeichen zu entfernen.
Entfernen Sie dann das letzte Zeichen
let renderedData = Moustache Render (dataToRender, data); renderedData = (renderingData.trim ()). Teilzeichenfolge (0, renderedData.length-1)
quelle
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.
quelle
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:
quelle
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
quelle
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:
Hash:
Ausgabe:
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)
quelle