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?
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 :)
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 }} ...
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);
});
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}
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:
{{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èmeOk 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.