Dieser Artikel ist ein praktisches Einführungs -Tutorial für JSRender, in dem Beispiele Wissenspunkte wie die Verwendung von Tag sonst und den verschachtelten Zugriff auf übergeordnete Daten beschreiben. Teilen Sie es für Ihre Referenz. Die Details sind wie folgt:
Vorwort
JSRender ist eine JavaScript -Template -Engine, die auf JQuery basiert. Es hat die folgenden Funktionen:
・ Einfach und intuitiv
・ Mächtig
・ Erweiterbar
・ So schnell wie Blitz
Diese Funktionen sehen fantastisch aus, aber fast jede Template -Engine wird so beworben. . .
Aufgrund des Arbeitsbedarfs kam Xiaocai mit dieser Vorlagenmotor in Kontakt. Nachdem ich es für eine Weile verwendet hatte, stellte ich fest, dass es in der Tat ziemlich mächtig ist, aber Xiaocai ist der Meinung, dass einige Orte zu mächtig sind, was es den Menschen dazu bringt, es schwer zu verstehen.
Andererseits sind die offiziellen Dokumente von JSRender relativ detailliert, aber es gibt überraschend nur wenige andere Informationen. Wenn Sie auf Probleme stoßen, können Sie im Grunde nicht suchen. Sie können nicht nur verwandte Probleme finden, sondern es gibt auch fast kein Ergebnis.
Darüber hinaus sind einige Teile von JSRender in der Tat schwer zu verstehen, daher brauche ich dringend einige "Best Practices", um sie zu teilen.
Basierend auf der jüngsten Verwendung hat Xiaocai einige praktische Erfahrungen zusammengefasst, und diese Erfahrungen können natürlich nicht in der offiziellen Dokumentation gefunden werden.
Verschachtelte Schleife zum Zugriff auf übergeordnete Daten mit #Parent (nicht empfohlen)
Kopieren Sie den Code wie folgt: <! DocType html>
<html>
<kopf>
<meta charset = "utf-8">
<title> verschachtelte Schleife mit #Parent zum Zugriff auf übergeordnete Daten --- von Yang Yuan </title>
<Styles>
</style>
</head>
<body>
<div>
<tabelle>
<kopf>
<tr>
<Th> Seriennummer </th>
<Th> Name </th>
<Th> Familienmitglieder </th>
</tr>
</head>
<tbody id = "list">
</tbody>
</table>
</div>
<script src = "jQuery.min.js"> </script>
<script src = "jsviews.js"> </script>
<!-Definieren Sie die JSRender-Vorlage->
<script id = "testtmpl" type = "text/x-jsrender">
<tr>
<td> {{:#index + 1}} </td>
<td> {{: name}} </td>
<td>
{{für Familie}}
{{!-Verwenden Sie #Parent, um über den übergeordneten Index zuzugreifen-}}
<b> {{:#parent.parent.index + 1}}. {{:#index + 1}} </b>
{{!-Verwenden Sie #Parent, um über übergeordnete Daten zuzugreifen, und die übergeordneten Daten werden im Datenattribut gespeichert-}}
{{!-#data entspricht diesem-}}
{{: #data}} von {{: #data}}
{{/für}}
</td>
</tr>
</script>
<Script>
// Datenquelle
var datasrouce = [{{
Name: "Zhang San",
Familie: [
"Papa",
"Mutter",
"älterer Bruder"
]
}, {
Name: "Li Si",
Familie: [
"Großvater",
"Großmutter",
"Onkel"
]
}];
// Daten rendern
var html = $ ("#testtmpl"). Render (DataSrouce);
$ ("#list"). append (html);
</script>
</body>
</html>
Verschachtelte Schleifen zum Zugriff auf übergeordnete Daten mithilfe von Parametern (empfohlen)
Die Codekopie lautet wie folgt:
<! DocType html>
<html>
<kopf>
<meta charset = "utf-8">
<titels> verschachtelte Schleifen verwenden Parameter, um über übergeordnete Daten zuzugreifen --- von Yang Yuan </title>
<Styles>
</style>
</head>
<body>
<div>
<tabelle>
<kopf>
<tr>
<Th> Seriennummer </th>
<Th> Name </th>
<Th> Familienmitglieder </th>
</tr>
</head>
<tbody id = "list">
</tbody>
</table>
</div>
<script src = "jQuery.min.js"> </script>
<script src = "jsviews.js"> </script>
<!-Definieren Sie die JSRender-Vorlage->
<script id = "testtmpl" type = "text/x-jsrender">
<tr>
<td> {{:#index + 1}} </td>
<td> {{: name}} </td>
<td>
{{!- Wenn Sie eine für Schleife verwenden, können Sie anschließend Parameter hinzufügen. Die Parameter müssen mit ~ beginnen, und mehrere Parameter werden durch Leerzeichen getrennt-}}
{{!- Durch Parameter zwischenspeichern wir die übergeordneten Daten. Durch den Zugriff auf die Parameter in der untergeordneten Schleife können wir indirekt auf die übergeordneten Daten zugreifen-}}.
{{für familien ~ parentIndex =#index ~ parentName = name}}
<b> {{: ~ parentIndex + 1}}. {{:#index + 1}} </b>
{{!-#data entspricht diesem-}}
{{: #data}} von {{: ~ parentName}}
{{/für}}
</td>
</tr>
</script>
<Script>
// Datenquelle
var datasrouce = [{{
Name: "Zhang San",
Familie: [
"Papa",
"Mutter",
"älterer Bruder"
]
}, {
Name: "Li Si",
Familie: [
"Großvater",
"Großmutter",
"Onkel"
]
}];
// Daten rendern
var html = $ ("#testtmpl"). Render (DataSrouce);
$ ("#list"). append (html);
</script>
</body>
</html>
Verwenden Sie sonst in benutzerdefinierten Tags (sehr nicht empfohlen)
Die Codekopie lautet wie folgt:
<! DocType html>
<html>
<kopf>
<meta charset = "utf-8">
<title> Verwenden Sie sonst in benutzerdefinierten Tags --- von Yang Yuan </title>
<Styles>
</style>
</head>
<body>
<div>
<tabelle>
<kopf>
<tr>
<Th> Name </th>
<Th> Einheitspreis </th>
</tr>
</head>
<tbody id = "list">
</tbody>
</table>
</div>
<script src = "jQuery.min.js"> </script>
<script src = "jsviews.js"> </script>
<!-Definieren Sie die JSRender-Vorlage->
<script id = "testtmpl" type = "text/x-jsrender">
<tr>
<td> {{: name}} </td>
<td>
{{!-Isshow ist ein benutzerdefiniertes Tag, der Preis ist der übergebene Parameter, der Status ist eine zusätzliche Eigenschaft-}}
{{isShow preisstatus = 0}}
{{:Preis}}
{{else Preisstatus = 1}}
-
{{/isshow}}
</td>
</tr>
</script>
<Script>
// Datenquelle
var datasrouce = [{{
Name: "Apple",
Preis: 108
}, {
Name: "da li",
Preis: 370
}, {
Name: "Pfirsich",
Preis: 99
}, {
Name: "Ananas",
Preis: 371
}, {
Name: "Orange",
Preis: 153
}];
// benutzerdefiniertes Tag
$ .views.tags ({{
"isshow": Funktion (Preis) {
var temp = price+''. split ('');
if (this.tagctx.props.status === 0) {
// Beurteilen Sie, ob der Preis die Anzahl der Narzissen ist. In diesem Fall wird es angezeigt, sonst wird es nicht angezeigt.
if (price == (math.pow (parseInt (temp [0], 10), 3)+math.pow (parseInt (temp [1], 10), 3)+math.pow (parseInt (temp [2], 10), 3)) {
zurückgeben.
}anders{
zurückgeben.
}
}anders{
zurückkehren "";
}
}
});
// Daten rendern
var html = $ ("#testtmpl"). Render (DataSrouce);
$ ("#list"). append (html);
</script>
</body>
</html>
Verwenden Sie Helfer anstelle von benutzerdefinierten Tags (empfohlen)
Die Codekopie lautet wie folgt:
<! DocType html>
<html>
<kopf>
<meta charset = "utf-8">
<title> Verwenden Sie Helfer anstelle von benutzerdefinierten Tags --- von Yang Yuan </title>
<Styles>
</style>
</head>
<body>
<div>
<tabelle>
<kopf>
<tr>
<Th> Name </th>
<Th> Einheitspreis </th>
</tr>
</head>
<tbody id = "list">
</tbody>
</table>
</div>
<script src = "jQuery.min.js"> </script>
<script src = "jsviews.js"> </script>
<!-Definieren Sie die JSRender-Vorlage->
<script id = "testtmpl" type = "text/x-jsrender">
<tr>
<td> {{: name}} </td>
<td>
{{{!-Verwenden Sie nativ, wenn Sie für den Zweigsprung den Helfer für die logische Verarbeitung verwenden.
{{if ~ isShow (Preis)}}
{{:Preis}}
{{anders}}
-
{{/Wenn}}
</td>
</tr>
</script>
<Script>
// Datenquelle
var datasrouce = [{{
Name: "Apple",
Preis: 108
}, {
Name: "da li",
Preis: 370
}, {
Name: "Pfirsich",
Preis: 99
}, {
Name: "Ananas",
Preis: 371
}, {
Name: "Orange",
Preis: 153
}];
//Helfer
$ .views.helpers ({{
"isshow": Funktion (Preis) {
var temp = price+''. split ('');
if (price == (math.pow (parseInt (temp [0], 10), 3)+math.pow (parseInt (temp [1], 10), 3)+math.pow (parseInt (temp [2], 10), 3)) {
zurückkehren;
}anders{
false zurückgeben;
}
}
});
// Daten rendern
var html = $ ("#testtmpl"). Render (DataSrouce);
$ ("#list"). append (html);
</script>
</body>
</html>
Klicken Sie hier, um den vollständigen Beispielcode herunterzuladen.
Ich hoffe, dieser Artikel wird für das JSRender -Programmierlernen aller hilfreich sein.