¿Cómo funcionan los motores de plantillas en JavaScript?

Question

¿Podría explicarme cómo funcionan los motores de plantillas en JavaScript? Gracias.

JSON

{ "color" : "red"} 

Plantilla

<strong><%=color%></strong> 

Resultado

<strong>Red</strong> 

Answer 1

Ellos pueden variar según la aplicación, pero el uno que está hablando parece que funciona de la siguiente manera:

1. analizar la página buscando las llaves en <%= %> etiquetas

2. coincidir con la clave a la par clave/valor en el JSON

3. Reemplace las etiquetas/tecla con el valor.

Answer 2

Como punto de partida que os recomiendo dar un vistazo al método String.prototype.replace y especialmente el uso de su función de devolución de llamada:

function replaceTokens(str, replacement) { 
    return str.replace(/<\%=([^%>]+)\%>/g, function (str, match) { 
    return replacement[match]; 
    }); 
} 

var input = "<strong><%=color%></strong>"; 
replaceTokens(input, { "color" : "Red"}); 
// returns <strong>Red</strong> 

replaceTokens("<%=var1%> <%=var2%>", { "var1" : "Hello", "var2": "world!"}); 
// returns "Hello world!" 

Dale un vistazo a estos artículos:

• Search and Don't Replace
• John Resig's Micro-Templating Engine
• Better JavaScript Templates (sintaxis JSP similar)
• jQuery Templates Proposal

Answer 3

no es muy diferente de otras soluciones de templates (a nivel conceptual).

{ "color" : "red"} 

Especifica un atributo con el valor colorred.

<strong><%=color%></strong> 

Medios "Usar el valor de color donde tengo <%=color%>. Basado en wahat tenga, plantillas-motor probablemente camina el DOM y encuentra a los nodos que tienen valores que coinciden con <%=somestring%>. A continuación, se comprueba para ver si no es un atributo que coincide con el valor somestring Si hay uno, al que sustituye el valor de <%=somestring%> con el valor definido en el JSON (que, en este caso es red)

esto finalmente le da:..

<strong>Red</strong>