jSmart demo

jSmart is a port of PHP Smarty templates to Javascript find out more at https://github.com/miroshnikov/jsmart

by Sillvva

HTML

<script src="https://cdn.rawgit.com/miroshnikov/jsmart/master/smart.js"></script>
<script id="test_tpl" type="text/x-jsmart-tmpl">

   <h1>{$greeting}</h1>

   {foreach $books as $i => $book}
      <div style="background-color: {cycle values="cyan,yellow"};">
         [{$i+1}] {$book.title|upper} by {$book.author} 
            {if $book.price}                                
               Price: <span style="color:red">${$book.price}</span>
            {/if}                                           
      </div>
   {foreachelse}
      No books
   {/foreach}

   Total: {$book@total}

</script>

<div id='results'></div>

JavaScript

var data = {
       greeting: 'Hi, there are some JScript books you may find interesting:',
       books : [
          {
             title  : 'JavaScript: The Definitive Guide',          
             author : 'David Flanagan',                            
             price  : '31.18'
          },
          {
             title  : 'Murach JavaScript and DOM Scripting',
             author : 'Ray Harris',
          },
          {
             title  : 'Head First JavaScript',
             author : 'Michael Morrison',
             price  : '29.54'
          }
       ]      
    };


   var tplText = document.getElementById('test_tpl').innerHTML;
   var tpl = new jSmart( tplText );
   var res = tpl.fetch( data );

   document.getElementById('results').innerHTML = res;