Cet article est un didacticiel d'introduction pratique pour JSRender, que les exemples décrivent des points de connaissance tels que l'utilisation d'accès à étiquette et de boucle imbriqués aux données des parents. Partagez-le pour votre référence. Les détails sont les suivants:
Préface
JSRender est un moteur de modèle JavaScript basé sur jQuery. Il a les fonctionnalités suivantes:
・ Simple et intuitif
· Puissant
·Extensible
・ Aussi vite que la foudre
Ces fonctionnalités sont incroyables, mais presque tous les moteurs de modèle seront annoncés comme celui-ci. . .
En raison des besoins de travail, Xiaocai est entré en contact avec ce moteur de modèle. Après l'avoir utilisé pendant un certain temps, j'ai trouvé qu'il était en effet assez puissant, mais Xiaocai estime que certains endroits sont trop puissants, ce qui rend les gens qui ont du mal à comprendre.
D'un autre côté, les documents officiels de JSRender sont relativement détaillés, mais il y a étonnamment peu d'autres informations. Si vous rencontrez des problèmes, vous pouvez essentiellement ne pas rechercher. Non seulement vous pouvez trouver des problèmes connexes, mais il n'y a presque aucun résultat.
De plus, certaines parties de JSRender sont en effet difficiles à comprendre, j'ai donc besoin d'urgence de «meilleures pratiques» à partager.
Sur la base d'une utilisation récente, Xiaocai a résumé certaines expériences pratiques, et bien sûr, ces expériences ne peuvent être trouvées dans la documentation officielle.
Boucle imbriquée pour accéder aux données des parents à l'aide de #parent (non recommandée)
Copiez le code comme suit: <! Doctype html>
<html>
<adal>
<meta charset = "utf-8">
<Title> Boucle imbriquée à l'aide de #parent pour accéder aux données parentales --- par Yang Yuan </Title>
<style>
</ style>
</ head>
<body>
<div>
<ballage>
<adal>
<tr>
<th> Numéro de série </th>
<th> nom </th>
<th> membres de la famille </th>
</tr>
</ head>
<tbody id = "list">
</tbody>
</ table>
</div>
<script src = "jQuery.min.js"> </ script>
<script src = "jsviews.js"> </ script>
<! - Définir le modèle jsrender ->
<script id = "testtmpl" type = "text / x-jsrender">
<tr>
<td> {{: # index + 1}} </td>
<td> {{: name}} </td>
<TD>
{{pour la famille}}
{{! - Utilisez #parent pour accéder à l'index parent -}}
<b> {{: # parent.parent.index + 1}}. {{: # index + 1}} </b>
{{! - Utilisez #parent pour accéder aux données des parents, et les données des parents sont enregistrées dans l'attribut de données -}}
{{! - #data équivaut à cela -}}
{{: #data}} de {{: #data}}
{{/pour}}
</td>
</tr>
</cript>
<cript>
// source de données
var dataSrouce = [{
Nom: "Zhang San",
famille: [
"papa",
"Mère",
"frère aîné"
]]
}, {
Nom: "Li si",
famille: [
"grand-père",
"grand-mère",
"oncle"
]]
}];
// Rendre des données
var html = $ ("# testtmpl"). render (dataSrouce);
$ ("# list"). append (html);
</cript>
</docy>
</html>
Boucles imbriquées pour accéder aux données des parents à l'aide de paramètres (recommandés)
La copie de code est la suivante:
<! Doctype html>
<html>
<adal>
<meta charset = "utf-8">
<Title> Les boucles imbriquées utilisent des paramètres pour accéder aux données des parents --- par Yang Yuan </Title>
<style>
</ style>
</ head>
<body>
<div>
<ballage>
<adal>
<tr>
<th> Numéro de série </th>
<th> nom </th>
<th> membres de la famille </th>
</tr>
</ head>
<tbody id = "list">
</tbody>
</ table>
</div>
<script src = "jQuery.min.js"> </ script>
<script src = "jsviews.js"> </ script>
<! - Définir le modèle jsrender ->
<script id = "testtmpl" type = "text / x-jsrender">
<tr>
<td> {{: # index + 1}} </td>
<td> {{: name}} </td>
<TD>
{{! - Lorsque vous utilisez une boucle pour une boucle, vous pouvez ajouter des paramètres par la suite. Les paramètres doivent commencer par ~, et plusieurs paramètres sont séparés par des espaces -}}
{{! - À travers des paramètres, nous mettons en cache les données parentales. En accédant aux paramètres de la boucle enfant, nous pouvons indirectement accéder aux données parentales -}}
{{pour la famille ~ parentIndex = # index ~ parentName = name}}
<b> {{: ~ parentIndex + 1}}. {{: # index + 1}} </b>
{{! - #data équivaut à cela -}}
{{: #data}} de {{: ~ parentName}}
{{/pour}}
</td>
</tr>
</cript>
<cript>
// source de données
var dataSrouce = [{
Nom: "Zhang San",
famille: [
"papa",
"Mère",
"frère aîné"
]]
}, {
Nom: "Li si",
famille: [
"grand-père",
"grand-mère",
"oncle"
]]
}];
// Rendre des données
var html = $ ("# testtmpl"). render (dataSrouce);
$ ("# list"). append (html);
</cript>
</docy>
</html>
Utiliser d'autre dans des balises personnalisées (hautement pas recommandées)
La copie de code est la suivante:
<! Doctype html>
<html>
<adal>
<meta charset = "utf-8">
<Title> Utiliser Else dans les balises personnalisées --- par Yang Yuan </Title>
<style>
</ style>
</ head>
<body>
<div>
<ballage>
<adal>
<tr>
<th> nom </th>
<th> Prix unitaire </th>
</tr>
</ head>
<tbody id = "list">
</tbody>
</ table>
</div>
<script src = "jQuery.min.js"> </ script>
<script src = "jsviews.js"> </ script>
<! - Définir le modèle jsrender ->
<script id = "testtmpl" type = "text / x-jsrender">
<tr>
<td> {{: name}} </td>
<TD>
{{! - IsShow est une balise personnalisée, le prix est le paramètre passé, le statut est une propriété supplémentaire -}}
{{ISShow Price Status = 0}}
{{:prix}}
{{else Price Status = 1}}
-
{{/ iSShow}}
</td>
</tr>
</cript>
<cript>
// source de données
var dataSrouce = [{
Nom: "Apple",
Prix: 108
}, {
Nom: "da li",
Prix: 370
}, {
Nom: "Peach",
Prix: 99
}, {
Nom: "Pineapple",
Prix: 371
}, {
Nom: "Orange",
Prix: 153
}];
// Tag personnalisée
$ .Views.tags ({
"iSShow": fonction (prix) {
var temp = prix + ''. Split ('');
if (this.tagctx.props.status === 0) {
// juger si le prix est le nombre de jonquilles. Si c'est le cas, il sera affiché, sinon il ne sera pas affiché.
if (prix == (math.pow (parseInt (temp [0], 10), 3) + math.pow (parseInt (temp [1], 10), 3) + math.pow (parseInt (temp [2], 10), 3))) {
renvoie this.tagctxs [0] .Render ();
}autre{
Renvoie this.tagctxs [1] .Render ();
}
}autre{
retour "";
}
}
});
// Rendre des données
var html = $ ("# testtmpl"). render (dataSrouce);
$ ("# list"). append (html);
</cript>
</docy>
</html>
Utilisez Helper au lieu de balises personnalisées (recommandées)
La copie de code est la suivante:
<! Doctype html>
<html>
<adal>
<meta charset = "utf-8">
<Title> Utilisez l'assistance au lieu des balises personnalisées --- par Yang Yuan </Title>
<style>
</ style>
</ head>
<body>
<div>
<ballage>
<adal>
<tr>
<th> nom </th>
<th> Prix unitaire </th>
</tr>
</ head>
<tbody id = "list">
</tbody>
</ table>
</div>
<script src = "jQuery.min.js"> </ script>
<script src = "jsviews.js"> </ script>
<! - Définir le modèle jsrender ->
<script id = "testtmpl" type = "text / x-jsrender">
<tr>
<td> {{: name}} </td>
<TD>
{{! - Utilisez natif si pour la branche de branche, utilisez une aide pour le traitement logique -}}
{{si ~ iSShow (prix)}}
{{:prix}}
{{autre}}
-
{{/si}}
</td>
</tr>
</cript>
<cript>
// source de données
var dataSrouce = [{
Nom: "Apple",
Prix: 108
}, {
Nom: "da li",
Prix: 370
}, {
Nom: "Peach",
Prix: 99
}, {
Nom: "Pineapple",
Prix: 371
}, {
Nom: "Orange",
Prix: 153
}];
//Auxiliaire
$ .views.helpers ({
"iSShow": fonction (prix) {
var temp = prix + ''. Split ('');
if (prix == (math.pow (parseInt (temp [0], 10), 3) + math.pow (parseInt (temp [1], 10), 3) + math.pow (parseInt (temp [2], 10), 3))) {
Retour Vrai;
}autre{
retourne false;
}
}
});
// Rendre des données
var html = $ ("# testtmpl"). render (dataSrouce);
$ ("# list"). append (html);
</cript>
</docy>
</html>
Cliquez ici pour télécharger l'exemple complet du code.
J'espère que cet article sera utile à l'apprentissage de la programmation JSRender de tous.