Syntax

Comments

{* this is comment *}

Variables

{$foo = 'bar'}                    {* create/assign variable *}
{$foo}
{$foo|upper|replace:'B':'G'}      {* variable with modifiers *}`

Output =>

bar
GAR

see also modifiers

Objects and arrays

{$person = [name=>[first=>'John'], age=>36]}  {* create object *}
{$person.name.last = 'Doe'}                  {* add/set object property *}
{$person['favorite gadget'] = 'iPad'}        {* object property name can have spaces *}
I am {$person.name.first} {$person.name.last} and I like my {$person['favorite gadget']}

{$days = ['Sun', 'Mon', 'Tue']}               {* create array *}
{$days[] = 'Wed'}                           {* add to array *}

Today is {$days[3]}

Output =>

I am John Doe and I like my iPad
            
Today is Wed

Double-quoted strings

Variable names will be expanded in double-quoted strings.

{$bar = "value of foo is '$foo'"}
{$bar}

output =>

value of foo is 'bar'

If a variable contain any other character than [0-9a-zA-Z]_, it must be surrounded by backticks.

{$foo = "`$person.name.first` has `$person['favorite gadget']`"} 
{$foo}

output =>

John has iPad

Any Smarty tag will also be expanded in double quotes.

{$dayNames = "{foreach $days as $dayName} {$dayName@index+1}:'{$dayName|upper}'{if !$dayName@last},{/if} {/foreach}"} 
Days of the week are: {$dayNames}

output =>

Days of the week are:  1:'SUN',  2:'MON',  3:'TUE',  4:'WED'

Functions

{function 'sayHello' to=''}
   Hello {$to}!
{/function}

{sayHello to="whole `'world'|replace:w:W`"}

Output =>

Hello whole World!

Any Javascript function can be called

function hello(to) { return 'Hello '+to; }

(new jSmart(...)).fetch({ 
    helloAgain: function(to){ return hello(to) + ' again'; } 
});

in template =>

{hello('world')|replace:'world':'World'}
{helloAgain('world')}

output =>

 Hello World
 Hello world again

see also function

Javascript objects

Person = function() {
    this.name = {
        first: 'John',
        last: 'Doe'
    };
    this.age = 36;
}

Person.prototype.getName = function(nameType) {
    return nameType=='last' ? this.name.last : this.name.first;
}

(new jSmart(...)).fetch({ 
    human: new Person()
});

in template =>

{$human->getName('first')} {$human->getName('last')} of age {$human->age}

output =>

John Doe of age 36

Operators

Operators in order of precedence, with the highest-precedence ones at the top.

Operator	Alternates	Syntax Example	Meaning	JavaScript Equivalent
++ --		++a b--	(pre/post)increment/decrement	++ --
!	not	not a	negation (unary)	!
* /		a*b	multiply, divide	* /
%	mod	a mod b	modulous	%
+ -		a+b-c	addition, subtraction	+ -
>	gt	a gt b	greater than	>
<	lt	a lt b	less than	<
>=	gte, ge	a ge b	greater than or equal	>=
<=	lte, le	a le b	less than or equal	<=
==	eq	a eq b	equals	==
!=	ne, neq	a neq b	not equals	!=
=== !==		a === b	check for identity	=== !==
is not div by		a is not div by 4	divisible by	a % b == 0
is not even		a is not even	not an even number (unary)	a % 2 == 0
is not even by		a is not even by b	grouping level not even	(a / b) % 2 == 0
is not odd		a is not odd	not an odd number (unary)	a % 2 != 0
is not odd by		a is not odd by b	not an odd grouping	(a / b) % 2 != 0
&&	and	a && b	true if both a and b are true	&&
||	or	a||b	true if either a or b is true	||
xor		a xor b	exclusive or	(a||b) && !(a&&b)

Condition

{if $foo == 'bar'}
    bar
{elseif $foo eq 'buh'}
    buh
{else}
    smth else
{/if}

see also if

Iterate over arrays and objects

{foreach}

{$colors = [red=>'#f00', green=>'#0f0', blue=>'#00f']}

{foreach $colors as $name => $code}
    <p style='color:{$code}'>{$code@index}: {$name}</p>
{foreachelse}
    no colors
{/foreach}

output =>

<p style='color:#f00'>0: red</p>
<p style='color:#0f0'>1: green</p>
<p style='color:#00f'>2: blue</p>

{section}

{$colorNames = [red,green,blue]}
{$colorCodes = ['#f00','#0f0','#00f']}

{section name='color' loop=$colorNames}
   <p style='color:{$colorCodes[color]}'>{$smarty.section.color.index}: {$colorNames[color]}</p>
{sectionelse}
   no colors
{/section}

output =>

<p style='color:#f00'>0: red</p>
<p style='color:#0f0'>1: green</p>
<p style='color:#00f'>2: blue</p>

{for}

{for $i=0 to $colorNames|count-1}
    <p style='color:{$colorCodes[$i]}'>{$i}: {$colorNames[$i]}</p>
{/for}

output=>

<p style='color:#f00'>0: red</p>
<p style='color:#0f0'>1: green</p>
<p style='color:#00f'>2: blue</p>

while

{$j = $colorNames|count}
{while --$j>=0}
    <p style='color:{$colorCodes[$j]}'>{$j}: {$colorNames[$j]}</p>
{/while}

output =>

<p style='color:#00f'>2: blue</p>
<p style='color:#0f0'>1: green</p>
<p style='color:#f00'>0: red</p>

see also break, continue

Escape HTML

{$foo = '<b>bar</b>'}
{setfilter escape}
    {$foo}
{/setfilter}

output =>

<b>bar</b>

see also escape_html

Filters

{$foo = 'b a r'}
1: {$foo}

{setfilter replace:' ':'_'|upper}    {* any modifier(s) or/and function(s) *}
    2: {$foo}
    3: {$foo nofilter}
{/setfilter}

output =>

1: b a r
2: B_A_R
3: b a r

see also addDefaultModifier, registerFilter

Template inclusion

main:

this is main,
{include incl}

incl:

this is included
this is main,

output =>

this is included

see also [Include Templates](https://github.com/umakantp/jsmart/wiki/Include Templates), include, getTemplate

Template inheritance and overriding

parent:

Hello from {block hello}parent{/block}!

child:

{extends parent}
{block hello}child{/block}

output =>

Hello from child!

see also [Template inheritance](https://github.com/umakantp/jsmart/wiki/Template inheritance), extends, block, getTemplate

Default delimiters

jSmart.prototype.auto_literal = false;
jSmart.prototype.left_delimiter = '<%=';
jSmart.prototype.right_delimiter = '%>';

in template =>

<%= $foo='bar' %>
foo = <%= $foo %>

output =>

foo = bar

see also left_right_delimiter, auto_literal