Découvrez comment utiliser les compétences moustache.js_javascript du moteur de modèles Javascript.

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. Il vous suffit d'utiliser {{ et }} pour l'inclure et de mettre 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é.

Ne pas échapper 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 sur cet exemple, Moustache échappera par défaut aux balises html dans la valeur, mais parfois nous n'en avons pas besoin.

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

Lier la valeur de la sous-propriété

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

Je crois que lorsque vous verrez le premier exemple, quelqu'un se demandera si vous pouvez 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 ou non 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 restituer une certaine partie en fonction de la valeur que nous donnons, alors nous pouvons résoudre ce problème maintenant, bien sûr, nous devons également vous rappeler que c'est le cas. pas seulement false, ce 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 et vous résoudrez la plupart des problèmes, mais il y aura toujours des problèmes, à savoir la sortie de la boucle, si vous écrivez un par un, je pense que ce sera très irritant, bien sûr, Moustache. ne nous décevra pas, il montre également comment boucler la sortie. Ici, nous produisons un tableau composé d'objets, nous devons utiliser {{.}} au lieu de {{name}}.

Boucle et 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 quand même 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 quel sera l'effet si nous utilisons maintenant des fonctions comme sections ?

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, nous pourrons alors la traiter nous-mêmes.

Festival des Antonymes

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

Nous avons également utilisé les sections ci-dessus, mais nous ne pouvons choisir que de sortir ou non 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.

Quelques modèles

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

Bien que Moustache fasse gagner beaucoup de temps, nous avons défini de nombreux modèles, mais ils ne peuvent pas être imbriqués et utilisés les uns dans les autres, ce qui le rend également encombrant.

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

Alors que 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.

J’espère que cet article sera utile à l’apprentissage de chacun.