Variabile Escape Moustache contenente apostrofo per JavaScript

Question

Ho una variabile ({{title}}) che contiene un apostrofo. Moustache lo sfugge come '.

Tuttavia, i seguenti risultati del modello in un errore JavaScript (Expected token ')'):

<a href="javascript:confirm('{{title}}?');">{{title}}</a> 

dopo il rendering Baffo, l'errore di sintassi è chiaro ('Joe's Lame?'):

<a href="javascript:confirm('Joe's Lame?');">Joe's Lame</a> 

sto ancora imparando Baffi e mentre questo esempio è inventato, qual è il modo corretto di sfuggire alle variabili in queste situazioni.

fiddle per riferimento.

Answer 1

Quindi, se non deve essere Mustache, è possibile utilizzare un superset di Moustache chiamato Handlebars.

Prima registrare un aiutante Manubrio:

Handlebars.registerHelper('escapeJs', function(str) { 
    return str.replace(/[\'\"\\\/]/gm, function (c) { 
     return '\\' + c; 
    }); 
}); 

E si chiama il proprio aiuto come questo {{escapeJs title}}:

var view = { 
    title: "Joe's Lame\"\\/€" 
}; 

var template = Handlebars.compile(
    "<a href=\"javascript:confirm('{{escapeJs title}}');\">{{title}}</a>"); 
var output = template(view); 

vederlo dal vivo in questo fiddle.

Moustache è davvero bello ed è disponibile in quasi tutti i linguaggi di programmazione. I manubri sono fantastici e vengono utilizzati per es. in Backbone Thorax e assemble, un potente generatore di siti Web statici.

Edit: soluzione alternativa

Quando si utilizza ECMAScript 5 (e con spessoramento/shiv/polyfills che dovrebbero lavorare con IE8 pure), si potrebbe preparare la vista-oggetto per Moustache nel modo seguente. Ammetto che questa non è una soluzione molto comoda, ma quando si produce un output JavaScript è raro, potrebbe essere accettabile IMO.

function escapeJs (str) { 
    return str.replace(/[\'\"\\\/]/gm, function (c) { 
     return '\\' + c; 
    }); 
} 

var view = { 
    title: "Joe's Lame" 
}; 

Object.defineProperty(view, 'titleJsEnc', { 
    enumerable: false, 
    get: function() { return escapeJs(this.title); } 
}); 

var output = Mustache.render(
    "<a href=\"javascript:confirm('{{titleJsEnc}}');\">{{title}}</a>", view); 

Definizione di una nuova proprietà (via Object.defineProperty) fa il trucco. Si potrebbe scrivere un decoratore di oggetti generici che definisce un getter per ogni proprietà reale che restituisce il valore di stringa di escape.

Ecco la Modifica fiddle

: Alternativa: aspettare una nuova versione di Baffi

Una volta che questo pull-request si fonde e una nuova versione di Baffi è pubblicato, questo problema dovrebbe essere risolto in un "Modo nativo dei baffi".