jSmart is a port of the Smarty Template Engine to Javascript, a JavaScript template library that supports the template syntax and all the features (functioens, 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.
-
Install jSmart from NPM Registry
$ npm install jsmart -
Create template, use PHP Smarty syntax. Say demo.tpl
Hello {$name} -
Now lets read the template and compile it. jSmart object compiles the template.
var fs = require(fs); require('jsmart'); var tpl = fs.readFileSync('./demo.tpl', {encoding: 'utf-8'}); var compiledTpl = new jSmart(tpl); -
Assign data to the template passing Javascript object to the fetch function. Variable compiledTpl has the compiled template. You can call fetch function as many times with different data.
var fs = require(fs); require('jsmart'); var tpl = fs.readFileSync('./demo.tpl', {encoding: 'utf-8'}); var compiledTpl = new jSmart(tpl); var output = compiledTpl.fetch({name: 'World'}); console.log(output); -
Execute the file.
$ node demo.js -
Result would be.
Hello World
-
Include jSmart library Javascript file in your header.
<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 a folder. e.g. Install them in directories /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 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 never commit those changes in master repository.
This project was originally hosted at Google code and was started by miroshnikov. Since author was not active on project. I have forked and planned on pushing further improvements and features.