Explication détaillée de la façon d'utiliser le moteur de modèles JavaScript léger moustache.js

Nous expliquerons en détail comment utiliser le moteur de modèles JavaScript léger Moustache.js.

Exemple simple

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

Vous pouvez voir clairement la syntaxe du modèle Moustache, utilisez simplement { Inclure simplement { et }}, et mettez le nom de l'objet à l'intérieur.

On peut également voir dans cet exemple que si l'attribut spécifié est une fonction, le contenu de la fonction ne sera pas affiché. Au lieu de cela, la fonction sera exécutée en premier, puis le résultat renvoyé sera affiché. .

N'échappez pas aux balises HTML

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

Comme vous pouvez le voir dans cet exemple, Moustache convertira le HTML dans le valeur par défaut Les marqueurs sont échappés, mais parfois nous n'en avons pas besoin.

Donc ici, nous pouvons utiliser {{{ et }}} pour inclure, ou {{ et }} pour inclure, alors Moustache n'échappera pas aux balises html à l'intérieur.

Lier la valeur du sous-attribut

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

Je crois que quelqu'un y pensera quand il verra le premier exemple Est-il possible de lier des sous-propriétés, si vous regardez assez attentivement. Alors félicitations, c'est maintenant le moyen de résoudre vos besoins, utilisez simplement la sous-propriété via .

Sélection conditionnelle du rendu de la partie spécifiée

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

Il y a toujours des problèmes si nous devons encore pouvoir décider de rendre ou non. en fonction de la valeur que nous donnons à une certaine partie, ce problème peut être résolu maintenant. Bien sûr, il est également rappelé que ce n'est pas seulement faux qui empêchera le rendu de la partie spécifiée.

null, tableau vide, 0, chaîne vide sont également valides. La syntaxe est relativement simple, utilisez simplement {{#key}} ... {{/key}} pour contrôler le contenu au milieu.

Sortie en boucle

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

Apprenez simplement la méthode ci-dessus, vous avez résolu la plupart des problèmes, mais cela arrive toujours La partie gênante est la sortie en boucle. Si vous écrivez un par un, je pense que ce sera très irritant. Bien sûr, Moustache ne nous laissera pas tomber. Il fournit également un moyen de boucler la sortie. . Si ce que nous produisons est un tableau, nous devons donc utiliser {{.}} au lieu de {{name}}.

La boucle affiche la valeur renvoyée après traitement par la fonction spécifiée

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

La sortie de la boucle est disponible, mais nous souhaitons toujours la traiter plus tard . Ensuite, cela répond complètement à vos besoins, car Moustache transmettra les valeurs du tableau à votre fonction et affichera la valeur renvoyée par votre fonction. Ici, nous pouvons voir que la couche la plus externe est un tableau. Tant qu'une fonction est utilisée à l'intérieur, le tableau externe sera transmis en tant que paramètre de cette fonction.

Fonction personnalisée

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

Nous avons tous utilisé des variables comme sections ci-dessus, alors maintenant nous utilisons des fonctions comme sections, quel effet l'aura-t-il ?

Il appellera la fonction renvoyée par notre fonction, en prenant la chaîne d'origine au milieu de la section comme premier paramètre, et l'interpréteur par défaut comme deuxième paramètre, puis nous pourrons la traiter nous-mêmes.

Section Antonym

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

Nous utilisons également les sections ci-dessus, mais nous ne pouvons choisir que de sortir une certaine partie. Alors là, on se rattrape.

Si nous utilisons {{^ et }} pour définir une section, alors cette partie ne sera affichée que lorsque la valeur à l'intérieur est vide, nulle, un tableau vide ou une chaîne vide. Ensuite, nous pouvons obtenir l’effet if else.

Modèles partiels

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

Moustache fait gagner beaucoup de temps, mais nous avons défini de nombreux modèles, mais ils sont différents les uns des autres. Ils ne peuvent pas être utilisés les uns dans les autres, ce qui entraînerait également un encombrement.

Nous présentons donc également ici comment définir certains modèles à utiliser dans d'autres modèles. La façon d'utiliser d'autres modèles ici est simplement {{>templetename}}.

La plus grande différence est que la méthode Moustache.render a un troisième paramètre.

Modèles précompilés

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

Les modèles présentent des avantages et des inconvénients. La compilation du modèle prend juste du temps, donc si nous savons que nous allons utiliser un certain modèle, nous pouvons précompiler le modèle pour une utilisation ultérieure.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!