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] (http://www.smarty.net).
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 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 syntax and allows you to use the same Smarty templates on both server and client side, for both PHP and Javascript.
See the overview of the basic syntax of jSmart templates here
Demo page play with it at JsFiddle
Discussion board feel free to ask questions, share your ideas, etc.
##Usage
- Browser
<script type="text/javascript" src="src/smart.js"></script>
<script id="tpl" type="text/x-smarty-tmpl">
Hello {$who}!
</script>
<script>
var tplText = document.getElementById('tpl').innerHTML;
var compiled = new jSmart( tplText );
var res = compiled.fetch( { who:'world' } ); //res = Hello world!
</script>
- Node.js
npm install smarty.js
var Smarty = require('smarty.js');
var fs = require('fs');
Smarty.prototype.getTemplate = function(name) {
return fs.readFileSync('./templates/'+name, {encoding: 'utf-8'});
}
var tplText = fs.readFileSync('./templates/main.tpl', {encoding: 'utf-8'});
var compiled = new Smarty(tplText);
var res = compiled.fetch({...});
- Require.js
require(['smart'], function(Smarty){
var compiled = new Smarty("Hello {$who}!");
var res = compiled.fetch({who:'world'});
});
- Bower
bower install smarty
Note: The template's text is compiled in the constructor, so it's fast to call fetch()
with different assigned variables many times.
var compiled = new jSmart( '{$greeting}, {$name}!' );
compiled.fetch( {greeting:'Hello', name:'John'} ); //Hello, John!
compiled.fetch( {greeting:'Hi', name:'Jane'} ); //Hi, Jane!