2009-11-21 12 views
9

J'ai cherché un peu sur un exemple de base sur l'utilisation du moteur John Resig JavaScript Micro-Templating sur Google mais est sorti sec.Comment utiliser le moteur JavaScript de John Resig Micro-Templating?

J'ai décidé de l'apporter à la base des gars. Quelqu'un peut-il aider avec un exemple simple sur l'utilisation de ce moteur? Je n'ai jamais utilisé un moteur de template côté client auparavant.

Mise à jour: Ceci est le document HTML complet. Merci à Will.

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>John Resig JavaScript Micro-Templating engine</title> 
    <script src="jquery-1.3.2.js" type="text/javascript"></script> 
    <script src="MicroTemplates.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
     //Data 
     var data = { fname: "fred" }; 

     function onloadFunction() { 
      var s = $("#biodata").html(); 
      var s1 = tmpl(s, data); 

      $("#target").html(s1); 
     } 
    </script> 
    <script id="biodata" type="text/html"> 
     <div><%= fname %></div> 
    </script> 
</head> 
<body onload="onloadFunction();"> 
    <div id="target"> 
    </div> 
</body> 
</html> 
+0

Merci pour le changement. Greg. – Tebo

+0

Ce serait bien si vous pouviez fournir un lien vers un violon. – ayjay

Répondre

5

Le lien fourni a un exemple immédiatement après le code du moteur. Lire à partir du 2ème paragraphe. CB, en utilisant votre exemple, voici mon opinion sur le moteur, qui affiche la valeur de fname entre les balises div. Pour effectuer la génération, vous devriez faire quelque chose comme:

var data = { fname : "fred" }; 
var generatedText = tmpl("biodata", data); 

Ensuite, vous devez le sortir, par exemple.

document.write(generatedText); 

Or (en supposant une div existe dans la page avec l'id 'elemId')

var elem = document.getElementById("elemId"); 
elem.innerHTML = generatedText; 

Tout ce qui précède est non testé, mais nous espérons précis. J'espère que cela aide!

+0

Excellent, ma première réponse acceptée! Content d'avoir été utile! =) – Will