| <html> |
| <head><title>Jstemplates: Quick example</title> |
| <script src="../util.js" type="text/javascript"></script> |
| <script src="../jsevalcontext.js" type="text/javascript"></script> |
| <script src="../jstemplate.js" type="text/javascript"></script> |
| <script type="text/javascript"> |
| var favdata = {title: 'Favorite Things', favs:['raindrops', 'whiskers', 'mittens']}; |
| |
| function showData(reprocess) { |
| var templateToProcess; |
| var peg = document.getElementById('peg'); |
| |
| if (!reprocess) { // Get a copy of the template: |
| templateToProcess = jstGetTemplate('t1'); |
| // Clear the element to which we'll attach the template: |
| peg.innerHTML = ''; |
| // Attach the template |
| domAppendChild(peg, templateToProcess); |
| } |
| else { // Use the copy we already have |
| templateToProcess = peg; |
| } |
| // Wrap our data in a context object: |
| var processingContext = new JsEvalContext(favdata); |
| |
| // Process the template |
| jstProcess(processingContext, templateToProcess); |
| } |
| </script> |
| <link rel="stylesheet" type="text/css" href="css/maps2.deb.css"/> |
| </head> |
| <body onload="showData(false)"> |
| <!-- |
| The element to which our template will be attached at display-time: |
| --> |
| <div id="peg"></div> |
| |
| <!-- |
| A container to hide our template: |
| --> |
| <div style="display:none"> |
| |
| <!-- |
| This is the template div. It will be copied and attached to the div above. |
| --> |
| <div id="t1"> |
| <h1 jscontent="title"></h1> |
| <ul><li jscontent="$this" jsselect="favs"></li></ul> |
| </div> |
| |
| </div> |
| |
| <p> |
| <a href="#" onclick="favdata.favs.push('packages');showData(true);">Reprocess</a> |
| </p> |
| </body> |
| </html> |
