What's new? | Help | Directory | Sign in
Google
trimpath
TrimPath ajax / javascript projects
Project Home
  
Downloads
  
Wiki
  
Issues
  
Source
    
Search
for
Updated Aug 04, 2007 by steve.yen
JavaScriptTemplates  

JavaScript Templates

{ JavaScript Templates (JST) home | API | syntax | modifiers | download | community }

For web application developers, the '''JavaScript Templates''' engine from TrimPath is a lightweight APL / GPL open-source component that lets you have template-based programming (like PHP/ASP/JSP) while running in a web browser.

Build your own modern, brilliantly rich web applications (like GMail/OddPost/Bloglines) with JavaScript Templates.

More information:

NEWS:

10 Minute Introduction To JST

First, in our HTML page, we load the TrimPath JST component into our web browser... 

  <html>
    <head>
      <script language="javascript" src="trimpath/template.js"></script>
      ...
    </head>
    ...
  </html>

Next, create some structured JavaScript data -- just some Objects and Arrays... 

  <script language="javascript">
    var data = {
        products : [ { name: "mac", desc: "computer",     
                       price: 1000, quantity: 100, alert:null },
                     { name: "ipod", desc: "music player", 
                       price:  200, quantity: 200, alert:"on sale now!" },
                     { name: "cinema display", desc: "screen",       
                       price:  800, quantity: 300, alert:"best deal!" } ],
        customer : { first: "John", last: "Public", level: "gold" }
    };
  </script>

Next, here is a sample JST template that could 'render' that data. We've put our JST template into a hidden <textarea> in our HTML page... 

  <textarea id="cart_jst" style="display:none;">
    Hello ${customer.first} ${customer.last}.<br/>
    Your shopping cart has ${products.length} item(s):
    <table>
     <tr><td>Name</td><td>Description</td>
         <td>Price</td><td>Quantity & Alert</td></tr>
     {for p in products}
         <tr><td>${p.name|capitalize}</td><td>${p.desc}</td>
             <td>$${p.price}</td><td>${p.quantity} : ${p.alert|default:""|capitalize}</td>
             </tr>
     {forelse}
         <tr><td colspan="4">No products in your cart.</tr>
     {/for}
    </table>
    {if customer.level == "gold"}
      We love you!  Please check out our Gold Customer specials!
    {else}
      Become a Gold Customer by buying more stuff here.
    {/if}
  </textarea>

Here's some code that shows ways to do template processing with the API... 

  <script language="javascript">
    // The one line processing call...
    var result = TrimPath.processDOMTemplate("cart_jst", data);
    // Voila!  That's it -- the result variable now holds 
    // the output of our first rendered JST.

    // Alternatively, you may also explicitly parse the template...
    var myTemplateObj = TrimPath.parseDOMTemplate("cart_jst");

    // Now, calls to myTemplateObj.process() won't have parsing costs...
    var result  = myTemplateObj.process(data);
    var result2 = myTemplateObj.process(differentData);

    // Setting an innerHTML with the result is a common last step...
    someOutputDiv.innerHTML = result;
    // You might also do a document.write() or something similar...
  </script>

And the value of the result variable would be... 

    Hello John Public.<br/>
    Your shopping cart has 3 item(s):
    <table>
     <tr><td>Name</td><td>Description</td>
         <td>Price</td><td>Quantity & Alert</td></tr>
         <tr><td>MAC</td><td>computer</td>
             <td>$1000</td><td>100 : </td>
             </tr>
         <tr><td>IPOD</td><td>music player</td>
             <td>$200</td><td>200 : ON SALE NOW!</td>
             </tr>
         <tr><td>CINEMA DISPLAY</td><td>screen</td>
             <td>$800</td><td>300 : BEST DEAL!</td>
             </tr>
    </table>
      We love you!  Please check out our Gold Customer specials!

In addition to getting our templates from <textarea> elements that are part of our HTML page, we can also use templates from straight JavaScript Strings... 

  <script language="javascript">
    var myStr = "Hello ${customer.first} ${customer.last}, Welcome back!";

    // Using the process() method is easy...
    result = myStr.process(data);

    // Or, why bother with the middle-man variable?
    result = "Hello ${customer.first} ${customer.last}, Welcome back!".process(data);

    // The result will be "Hello John Public, Welcome back!"
    // which is the same as...
    result = "Hello " + customer.first + " " + customer.last + ", Welcome back!";

    // We can also do a one-time parse, to save parsing costs...
    var myTemplateObj = TrimPath.parseTemplate(myStr);
    var result  = myTemplateObj.process(data);
    var result2 = myTemplateObj.process(differentData);
  </script>

You probably want to see this in action, so take a look at the JST demo page.

Where Shall I Put My JavaScript Templates?

In the above introduction, we put our JST template into a hidden <textarea> in our HTML page.

Alternatively, you might keep .jst files on your web server and load them into the browser using XMLHttpRequest or a hidden iframe.

Server-side JST Evaluation

We designed JST to run in a web browser AND also in any standalone JavaScript interpreter (such as Mozilla Rhino or Spider Monkey). The core JST engine is meant to have no critical DOM/DHTML/browser dependencies.

{ JavaScript Templates (JST) home | API | syntax | modifiers | download | community }


Comment by leeight, Dec 14, 2007

cool

Comment by brettz9, Feb 13, 2008

This is awesome... And should be used in FF extensions, etc. too... My only gripe is how about making the template syntax identical (except where absolutely impossible) to Smarty? That's easy, powerful, and familiar to many... http://smarty.php.net

Comment by markturansky, Mar 05, 2008

The Velocity-like syntax failed to render in a default Jetty server because it's too much like JSTL. Are there any workarounds to this?

I also rolled my own, if only because I had the Java code for this from a long time ago. I simply translated to JavaScript:

More JavaScript Templates

Comment by yonas.robi, Apr 20, 2008

Can JavaScript Template compare to XSLT (for XML) in terms of rendering speed?