Comment fonctionnent les moteurs de templates dans JavaScript?

Question

Pourriez-vous m'expliquer comment fonctionnent les moteurs de templates dans JavaScript? Je vous remercie.

JSON

{ "color" : "red"} 

Modèle

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

Résultat

<strong>Red</strong> 

Answer 1

Ils peuvent varier en fonction la mise en œuvre, mais le un dont vous parlez semble que cela fonctionne en procédant comme suit:

1. Parse la page à la recherche des clés dans les balises <%= %>

2. match la clé de la paire clé/valeur dans le JSON

3. Remplacez les étiquettes/clé par la valeur.

Answer 2

En tant que point de départ, je vous recommande de donner un coup d'oeil à la méthode String.prototype.replace et spécialement en utilisant sa fonction de rappel:

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!" 

Donnez un look à ces articles:

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

Answer 3

Il est pas très différent des autres solutions de matriçage (au niveau conceptuel).

{ "color" : "red"} 

Indique un attribut color avec la valeur red.

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

moyens « Utiliser la valeur de color où je <%=color%>. Basé sur Wahat que vous avez, templating moteur marche probablement les DOM et trouve les noeuds qui ont des valeurs qui correspondent à <%=somestring%>. Ensuite, il vérifie si il est un attribut qui correspond à la valeur somestring S'il y a un, il remplace la valeur de <%=somestring%> à la valeur définie dans le JSON (qui, dans ce cas est red)

ce enfin vous donne:..

<strong>Red</strong>