Escape double orthèses {{…}} dans le modèle Moustache. (Modèle d'un modèle dans NodeJS)

Vous pouvez changer les délimiteurs à quelque chose qui ne sera pas en conflit avec les trois moustaches, comme les étiquettes erb-style:

 {{=<% %>=}} {{{ { "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 des conflits, choisissez un nouveau jeu de délimiteurs 🙂

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

HTML:

 ... \{{ myHandlbarsVar }} ... 

Vous pouvez également attribuer Mustache.tags = ["[[", "]]"]; Avant votre compilation de 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); }); 

Une autre option est de créer une aide pour la sortie des crochets frontaux.

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

Et 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} 

Je voulais juste une approche légèrement différente. J'ai essayé quelques autres façons et voici quelques choses dont je n'ai pas aimé:

1. Modifier les parenthèses angulaires par défaut {{obj.property}} à autre chose est une mauvaise idée. Principalement parce que dès que vous commencez à utiliser des composants tiers qui ne connaissent pas votre configuration angulaire non standard, les liaisons dans ces composants de la troisième partie cesseront de fonctionner. Il convient également de mentionner que l'équipe AngularJS ne semble pas vouloir aller sur la voie de l'autorisation de plusieurs attestations, vérifier ce problème
2. J'aime beaucoup les modèles de Moustache et je ne veux pas passer le projet entier à autre chose en raison de ce petit problème.
3. Beaucoup de personnes recommandent de ne pas mélanger le rendu côté client et serveur. Je ne suis pas tout à fait d'accord, je crois que si vous créez un site Web multipage qui a peu de pages avec des éléments angulaires et autres qui sont statiques (quelque chose comme sur nous ou les termes et conditions), il est parfaitement approprié d'utiliser les modèles de serveurs En maintenant ces pages plus faciles. Mais cela a dit, pour les pièces qui sont angulaires, vous ne devriez pas mélanger le rendu côté serveur.

Ok, pas ma réponse: si vous utilisez NodeJS et Express, vous devriez être le suivant:

Remplacez les liaisons {{}} dans votre partie angulaire avec quelque chose comme {[{}]} (ou quelque chose d'complètement unique)

Maintenant, dans votre itinéraire, ajoutez une méthode de rappel à vous:

 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 pourriez faire est d'extraire cette méthode dans un module distinct pour réutiliser toutes les routes.

C'est une bonne solution que j'ai trouvé pour ce type de problème où vous pouvez facilement modifier les délimiteurs dans les paramètres du modèle en exécution:

http://olado.github.com/doT/

Vous pouvez effectuer les réglages RegEx comme ceci:

 doT.templateSettings = { evaluate: /\{\{([\s\S]+?)\}\}/g, interpolate: /\{\{=([\s\S]+?)\}\}/g, encode: /\{\{!([\s\S]+?)\}\}/g, use: /\{\{#([\s\S]+?)\}\}/g, define: /\{\{##\s*([\w\.$]+)\s*(\:|=)([\s\S]+?)#\}\}/g, conditional: /\{\{\?(\?)?\s*([\s\S]*?)\s*\}\}/g, iterate: /\{\{~\s*(?:\}\}|([\s\S]+?)\s*\:\s*([\w$]+)\s*(?:\:\s*([\w$]+))?\s*\}\})/g, varname: 'it', strip: true, append: true, selfcontained: false };