jSmart is a port of the Smarty Template Engine to Javascript, a JavaScript template library that supports the template syntax and all the features (functions, variable modifiers, etc.) of the well-known PHP template engine Smarty.
jSmart is written entirely in JavaScript, does not have any DOM/DHTML/browser or third-party JavaScript library dependencies and can be run in a web browser as well as a standalone JavaScript interpreter or CommonJS environments like node.js.
jSmart supports plugin architecture, you can extend it with custom plugins: functions, blocks and variable modifiers, templates inclusion, templates inheritance and overriding, caching, escape HTML.
jSmart has some limited support of the PHP Smarty syntax and allows you to use the same Smarty templates on both server and client side, for both PHP and Javascript.
-
Include jSmart library Javascript file in your header (get the current release by cloning this repo)
<html> <head> <script language="javascript" src="jsmart.js"></script> </head> -
Create template, use PHP Smarty syntax. Put the template's text in <script> with the type="text/x-jsmart-tmpl" so a browser will not try to parse it and mess it up.
<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> -
Create JavaScript data object with variables to assign to the template
<script> 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' } ] }; </script> -
Create new object of jSmart class, passing the template's text as it's constructor's argument than call fetch(data), where data is an JavaScript object with variables to assign to the template
<script> var tplText = document.getElementById('test_tpl').innerHTML; var tpl = new jSmart( tplText ); var res = tpl.fetch( data ); /* or fetch straigth from JavaScript string var res = document.getElementById('test_tpl').innerHTML.fetch(data); */ document.write( res ); </script> -
The result would be
<h1>Hi, there are some JScript books you may find interesting:</h1> <div style="background-color: cyan;"> [1] JAVASCRIPT: THE DEFINITIVE GUIDE by David Flanagan <span style="color:red">$31.18</span> </div> <div style="background-color: yellow;"> [2] MURACH JAVASCRIPT AND DOM SCRIPTING by Ray Harris </div> <div style="background-color: cyan;"> [3] HEAD FIRST JAVASCRIPT by Michael Morrison <span style="color:red">$29.54</span> </div> Total: 3 -
The template's text is compiled in the jSmart constructor, so it's fast to call fetch() with different assigned variables many times.
var tpl = new jSmart( '{$greeting}, {$name}!' ); tpl.fetch( {greeting:'Hello', name:'John'} ); //returns: Hello, John! tpl.fetch( {greeting:'Hi', name:'Jane'} ); //returns: Hi, Jane!
https://github.com/umakantp/jsmart/wiki
-
Install Node.js and PHP in any given folder. e.g. You installed it in directory /home/user/jsmart/node and /home/user/jsmart/php respectively.
-
Clone jSmart repo in the same folder. e.g. Clone at /home/user/jsmart. So your jsmart repo is in /home/user/jsmart/jsmart folder.
-
Go to jSmart and run make test. e.g. Go to /home/user/jsmart/jsmart and run make test.
-
You can modify makefile and test/js/test-common.js for changing path of node and php respectively as per your needs but please don't commit those changes in master repository.
This project was originally hosted at Google code and was created by miroshnikov. Since author was not very active on project. I have forked and planned on pushing further improvements and features.