Esci da doppie parentesi {{...}} nel modello di baffi. (Templating un modello in NodeJS)

Question

Sto cercando di modello Un modello, come di seguito:

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

{{{debug this}}} 

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

dove voglio triplicare staffe di soggiorno, ma doppia parentesi da sostituire con il JSON passato. Qualcuno conosce il modo migliore per farlo senza scrivere il codice JS post-process, e in caso contrario, esiste un buon motore di template nodeJS per questo tipo di scenario?

Answer 1

È possibile passare delimitatori a qualcosa che non sia in conflitto con i baffi triple, come i tag erb-style:

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

Nota che si può fare questo tutte le volte che vuoi per tutto il modello. Ogni volta che si esegue in qualcosa che è in conflitto, scegliere una nuova serie di delimitatori :)

Answer 2

Questa è una buona soluzione che ho trovato per questo tipo di problema in cui si può facilmente passare delimitatori nelle impostazioni del modello in fase di esecuzione:

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

Si può fare le impostazioni RegEx come questo:

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

Answer 3

come descritto nella this Question manubri non supporta la modifica i delimitatori. Ma si può sfuggire le parentesi graffe doppie con un backslash come questo:

HTML:

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

Answer 4

È possibile anche assegnare Mustache.tags = ["[[", "]]"]; prima della compilazione del modello.

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

esempio

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

Answer 5

Volevo solo un approccio leggermente diverso. Ho provato pochi altri altri modi e qui ci sono alcune cose che non mi piace di loro:

1. Modifica angolare di default {{obj.property}} parentesi a qualcos'altro è una cattiva idea. Soprattutto quando si inizia a utilizzare componenti di terze parti che non sono a conoscenza della configurazione angolare non standard, i collegamenti in tali componenti di terze parti cesseranno di funzionare. Vale anche la pena ricordare che il team di AngularJS non sembra voler seguire il percorso di consentire più notazioni di binding, controllare this issue
2. Mi piacciono molto i modelli di baffi e non voglio passare l'intero progetto a qualcos'altro a causa di questo piccolo problema .
3. Molte persone consigliano di non mescolare il rendering lato client e lato server. Non sono completamente d'accordo, credo che se stai costruendo un sito web multipagina con poche pagine angolari e altre che sono statiche (qualcosa di simile a noi o alle pagine dei Termini e Condizioni), è perfettamente corretto usare i modelli di lato server per creare mantenere quelle pagine più facili.Ma detto questo, per le parti che sono angolari non si dovrebbe mescolare il rendering lato server.

Ok senza la mia risposta: Se si utilizza NodeJS ed esprimere si dovrebbe essere la seguente:

Sostituire attacchi {{}} nella vostra parte angolare con qualcosa come {[{}]} (o qualcosa di completamente unico)

Ora in voi percorso aggiungere un callback per il rendering metodo:

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

Questo dovrebbe consentire di utilizzare baffi togethe r con AngularJS. Un miglioramento che potresti fare è estrarre quel metodo in un modulo separato per riutilizzarlo su tutti i percorsi.

Answer 6

un'altra opzione è creare un helper per l'output di parentesi graffe.

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

e poi utilizzarlo nel modello come questo:

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

che poi uscite:

{Stack Over Flow Rocks}