web-dev-qa-db-fra.com

Échapper aux doubles accolades {{...}} dans le modèle Moustache. (gabarit d'un modèle dans NodeJS)

J'essaie de modéliser un modèle, comme ci-dessous:

{{{
{
  "name" : "{{name}}",
  "description" : "{{description}}"
}
}}}

{{{debug this}}}


<h1>{{name}}</h1>

Là où je veux tripler les crochets pour rester, mais les doubles crochets devant être remplacés par le JSON transmis. Tout le monde connaît le meilleur moyen de le faire sans écrire de code JS post-traitement. Sinon, existe-t-il un bon moteur de template nodeJS pour cela? type de scénario?

javascriptnode.jstemplate-enginemustache
26
Nick Jonas

Vous pouvez changer les délimiteurs en quelque chose qui ne sera pas en conflit avec la triple moustache, comme les balises de type erb:

{{=<% %>=}}
{{{
{
  "name": "<% name %>",
  "description": "<% description %>"
}
}}}
{{{debug this}}}
<%={{ }}=%>

Notez que vous pouvez le faire autant de fois que vous le souhaitez dans votre modèle. Chaque fois que vous rencontrez un problème, choisissez un nouvel ensemble de délimiteurs :)

41
bobthecow

Comme décrit dans cette Question guidon ne prend pas en charge la modification des délimiteurs. Mais vous pouvez échapper aux doubles accolades avec une barre oblique inverse comme celle-ci:

HTML:

... \{{ myHandlbarsVar }} ...
63
tmuecksch

Vous pouvez également affecter Mustache.tags = ["[[", "]]"]; avant la compilation de votre modèle. 

http://jsfiddle.net/fhwe4o8k/1/

par exemple.

    $(function () {
        Mustache.tags = ["[[", "]]"];
        var template = $('#test').html();
        Mustache.parse(template);
        var rendered = Mustache.render(template, {test: "Chris"});
        $('#content-placeholder').html(rendered);
    });
13
Christopher Marshall

une autre option est de créer un assistant pour la sortie des accolades.

Handlebars.registerHelper('curly', function(object, open) {
    return open ? '{' : '}';
});

puis utilisez-le dans le modèle comme ceci:

<script id="template" type="text/x-handlebars-template">
    {{curly true}}{{name}}{{curly}}
</script>

qui produit ensuite:

{Stack Over Flow Rocks}
5
Austin Haws

Je voulais juste une approche légèrement différente. J'ai essayé quelques autres moyens et voici quelques choses que je n'aimais pas à leur sujet:

  1. Changer les crochets Angular par défaut {{obj.property}} en quelque chose d'autre est une mauvaise idée. En général, dès que vous commencez à utiliser des composants tiers qui ne sont pas conscients de votre configuration angulaire non standard, les liaisons dans ces composants tiers cesseront de fonctionner. Il convient également de mentionner que l’équipe AngularJS ne semble pas vouloir aller dans la voie de l’autorisation de notations de reliure multiples, vérifiez ce problème
  2. J'aime assez les modèles de Moustache et je ne veux pas changer tout le projet pour autre chose à cause de ce petit problème.
  3. Quelques personnes recommandent de ne pas mélanger le rendu côté client et côté serveur. Je ne suis pas tout à fait d’accord, je pense que si vous construisez un site Web de plusieurs pages comportant peu de pages angulaires et d’autres statiques (comme à propos de nous ou des pages des conditions générales), il est parfaitement correct d’utiliser un modèle côté serveur pour créer maintenir ces pages plus facilement. Cela dit, pour les parties qui sont Angular, vous ne devez pas mélanger le rendu côté serveur.

Ok non ma réponse: Si vous utilisez NodeJS et Express, vous devriez être comme suit:

Remplacez les liaisons {{}} dans votre pièce angulaire par quelque chose comme {[{}]} (ou quelque chose de complètement unique)

Maintenant, dans votre route, ajoutez un rappel à votre méthode de rendu:

app.get('/', function(req, res){
  res.render('home', {
    title: 'Awesome Website',
    description: 'Uber Awesome Website'
  }, function(err, html){
    var htmlWithReplacedLeftBracket = html.replace(/{\[{/g, '{{');
    var finalHtml = htmlWithReplacedLeftBracket.replace(/}\]}/g, '}}');
    res.send(finalHtml);
  });
});

Cela devrait vous permettre d’utiliser Moustache avec AngularJS. Une amélioration que vous pouvez faire consiste à extraire cette méthode dans un module séparé pour la réutiliser sur toutes les routes.

0
Vitalij