Ausführliche Erklärung zur Verwendung der leichtgewichtigen JavaScript-Vorlagen-Engine mustache.js

Wir erklären Ihnen ausführlich, wie Sie die leichte JavaScript-Vorlagen-Engine von Mustache.j verwenden.

Einfaches Beispiel

function show(t) {
 $("#content").html(t);
}
var view = {
 title: 'YZF',
 cacl: function () {
 return 6 + 4;
 }
};
$("#content").html(Mustache.render("{{title}} spends {{cacl}}", view));

Sie können die Syntax der Mustache-Vorlage deutlich erkennen, verwenden Sie einfach { Just include { und }} und geben Sie den Namen des Objekts ein.

Aus diesem Beispiel geht auch hervor, dass, wenn das angegebene Attribut eine Funktion ist, der Inhalt der Funktion nicht ausgegeben wird. Stattdessen wird die Funktion zuerst ausgeführt und dann das zurückgegebene Ergebnis angezeigt .

HTML-Tags nicht entkommen

var view = {
 name: "YZF",
 company: "<b>ninesoft</b>"
};
show(Mustache.render("{{name}} <br /> {{company}} <br />{{{company}}}<br/>{{&company}}", view));

Wie Sie an diesem Beispiel sehen können, konvertiert Moustache den HTML-Code in Wert standardmäßig Markierungen werden maskiert, aber manchmal brauchen wir sie nicht.

Hier können wir also {{{ und }}} zum Einschließen oder {{ und }} zum Einschließen verwenden, dann entkommt Mustache den darin enthaltenen HTML-Tags nicht.

Binden Sie den Wert des Unterattributs

var view = {
 "name": {
 first: "Y",
 second: "zf"
 },
 "age": 21
};
show(Mustache.render("{{name.first}}{{name.second}} age is {{age}}", view));

Ich glaube, jemand wird daran denken, wenn er das erste Attribut sieht Beispiel: Ist es möglich, Untereigenschaften zu binden, wenn Sie genau hinsehen? Herzlichen Glückwunsch, jetzt können Sie Ihre Anforderungen erfüllen. Nutzen Sie einfach die Untereigenschaft über .

Bedingte Auswahl, ob das angegebene Teil gerendert werden soll

var view = {
 person: false
};
show(Mustache.render("eff{{#person}}abc{{/person}}", view));

Es gibt immer Probleme, ob wir auch entscheiden müssen, ob gerendert werden soll Basierend auf dem Wert, den wir angeben Ein bestimmter Teil, dann kann dieses Problem jetzt gelöst werden. Natürlich sollte beachtet werden, dass es nicht nur falsch ist, was dazu führt, dass der angegebene Teil nicht gerendert wird.

null, leeres Array, 0, leere Zeichenfolge sind gleichermaßen gültig. Die Syntax ist relativ einfach. Verwenden Sie einfach {{#key}} ... {{/key}}, um den Inhalt in der Mitte zu steuern.

Schleifenausgabe

var view = {
 stooges: [
 { "name": "Moe" },
 { "name": "Larry" },
 { "name": "Curly" }
 ]
};
show(Mustache.render("{{#stooges}}{{name}}<br />{{/stooges}}", view));

Lernen Sie einfach die obige Methode, Sie haben die meisten Probleme gelöst, aber es passiert immer noch Der problematische Teil ist die Schleifenausgabe, die meiner Meinung nach sehr irritierend sein wird. Es gibt auch eine Möglichkeit, die Ausgabe in einer Schleife durchzuführen von Objekten. Wenn es sich bei der Ausgabe um ein Array handelt, müssen wir {{.}} anstelle von {{name}} verwenden.

Die Schleife gibt den nach der Verarbeitung durch die angegebene Funktion zurückgegebenen Wert aus

var view = {
 "beatles": [
 { "firstname": "Johh", "lastname": "Lennon" },
 { "firstname": "Paul", "lastname": "McCartney" }
 ],
 "name": function () {
 return this.firstname + this.lastname;
 }
};
show(Mustache.render("{{#beatles}}{{name}}<br />{{/beatles}}", view));

Die Schleifenausgabe ist verfügbar, wir möchten sie aber später noch verarbeiten . Dann entspricht dies vollständig Ihren Anforderungen, da Mustache die Werte im Array an Ihre Funktion übergibt und den von Ihrer Funktion zurückgegebenen Wert ausgibt. Hier können wir sehen, dass die äußerste Ebene ein Array ist. Solange eine Funktion darin verwendet wird, wird das äußere Array als Parameter dieser Funktion übergeben.

Benutzerdefinierte Funktion

var view = {
 "name": "Tater",
 "bold": function () {
 return function (text, render) {
   return render(text) + "<br />";
 }
 }
}
show(Mustache.render("{{#bold}}{{name}}{{/bold}}", view));

Wir haben alle oben Variablen als Abschnitte verwendet, also verwenden wir jetzt Funktionen als Abschnitte, welche Wirkung wird es haben?

Es ruft die von unserer Funktion zurückgegebene Funktion auf, wobei die ursprüngliche Zeichenfolge in der Mitte des Abschnitts als erster Parameter und der Standardinterpreter als zweiter Parameter verwendet werden. Anschließend können wir sie selbst verarbeiten.

Antonymabschnitt

var view = {
 "repos": []
};
show(Mustache.render("{{#repos}}{{.}}{{/repos}}{{^repos}}no repos{{/repos}}", view));

Wir verwenden auch die obigen Abschnitte, aber wir können nur auswählen, ob ein bestimmter Teil ausgegeben werden soll. Also hier machen wir das wieder gut.

Wenn wir {{^ und }} verwenden, um einen Abschnitt zu definieren, wird dieser Teil nur angezeigt, wenn der darin enthaltene Wert leer, null, ein leeres Array oder eine leere Zeichenfolge ist. Dann können wir den Effekt von if else erzielen.

Teilvorlagen

var view = {
 names: [
 { "name": "y" },
 { "name": "z" },
 { "name": "f" }
 ]
};
var base = "<h2>Names</h2>{{#names}}{{>user}}{{/names}}";
var name = "<b>{{name}}</b>";
show(Mustache.render(base, view, { user: name }));

Mustache spart viel Zeit, aber wir haben viele Vorlagen definiert, aber sie sind unterschiedlich voneinander entfernt Sie können nicht ineinander verschachtelt verwendet werden, was ebenfalls umständlich ist.

Deshalb stellen wir hier auch vor, wie man einige Vorlagen für die Verwendung in anderen Vorlagen definiert. Die Möglichkeit, andere Vorlagen hier zu verwenden, ist einfach {{>templetename}}.

Der größte Unterschied besteht darin, dass die Mustache.render-Methode einen dritten Parameter hat.

Vorkompilierte Vorlagen

Mustache.parse(template);
//其他代码
Mustache.render(template,view);

Vorlagen haben Vor- und Nachteile. Das Kompilieren der Vorlage nimmt nur Zeit in Anspruch. Wenn wir also wissen, dass wir eine bestimmte Vorlage verwenden werden, können wir die Vorlage für die spätere Verwendung vorkompilieren.

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung zur Verwendung der leichtgewichtigen JavaScript-Vorlagen-Engine mustache.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!