jTemplates部分语法介绍

1.｛#if｝

{#if |COND|}..{#elseif |COND|}..{#else}..{#/if}

Examples:

{#if 2*8==16} good {#else} fail {#/if}

Return:

good

{#if $T.list_id == 5} good {#else} fail {#/if}

Return:

fail

(check 'data' below)

{#if $T.list_id} {$T.list_id} {#/if}

Return:

4

{#if $T.list_id == 3} System list {#elseif $T.list_id == 4} Users List {#elseif $T.list_id == 5} Errors list {#/if}

Return:

Users List

Code:

Data: (click to hide/show)

Results:

good

2.{#foreach}

Go for each element in table:

{#foreach |VAR| as |NAME| [begin=|CODE|] [count=|CODE|] [step=|CODE|]}..{#else}..{#/for}

{#else} and begin, count, step are optional.



Examples:



Write all names:

{#foreach $T.table as record} {$T.record.name} {#/for}

Result:

Anne Amelia Polly Alice Martha

Write names begin with second:

{#foreach $T.table as record begin=1} {$T.record.name} {#/for}

Result:

Amelia Polly Alice Martha

Write only two names begin with second:

{#foreach $T.table as record begin=1 count=2} {$T.record.name} {#/for}

Result:

Amelia Polly

Using step:

{#foreach $T.table as record step=2} {$T.record.name} {#/for}

Result:

Anne Polly Martha

Example with {#else}.

{#foreach $T.table as record begin=8} {$T.record.name} {#else} none {#/for}

Result:

none

Foreach set variables:

$index - index of element in table

$iteration - id of iteration (next number begin from 0)

$first - is first iteration?

$last - is last iteration?

$total - total number of iterations

$key - key in object (name of element) (0.6.0+)

$typeof - type of element (0.6.0+)



Example:

Template is long, so I copy it to file: example_foreach1.tpl

Usage:

$("#result").setTemplateURL('example_foreach1.tpl');

$("#result").processTemplate(data);

It should give result:

Index Iterator Name Age First? Last?

1 0 Amelia 24 true false

2 1 Polly 18 false false

3 2 Alice 26 false false

4 3 Martha 25 false true

---

New (0.7.8+):

Break and Continue:



Example 1: Skip item with id == 3

{#foreach $T.table as i}{#if $T.i.id==3}{#continue}{#/if}{$T.i.name}<br/>{#/for}

Anne

Amelie

Alice

Martha

Example 2: Break at element with id == 3

{#foreach $T.table as i}{#if $T.i.id==3}{#break}{#/if}{$T.i.name}<br/>{#/for}

Anne

Amelie

---

New (0.6.0+):

#foreach on object:

$('#result').setTemplate('{#foreach $T as i}{$T.i$key} - {$T.i}<br/>{#/for}');

$('#result').processTemplate({'a':1, 'b':2, 'c':3});

Variable $key display key for current element in object.

---

New (0.7.0+):

#foreach with function:

{#foreach |FUNC| as |NAME| [begin=|CODE|] [end=|CODE|] [count=|CODE|] [step=|CODE|]}..{#else}..{#/for}

Loop work till out of range (set by begin, end, count) or function |FUNC| return undefined/null.



Examples:

f = function(step) {

  if(step
> 100)
return null;
 // stop if loop is too long

  return "Step " + step;

};



$("#result").setTemplate("{#foreach f as
funcValue begin=10 end=20} {$T.funcValue}<br/> {#/for}");

$("#result").processTemplate();

Step 10

Step 11

Step 12

Step 13

Step 14

Step 15

Step 16

Step 17

Step 18

Step 19

Step 20

Try remove end limit, loop will be break on index 100.



Please use this features with carefull!

Code:

Data: (click to hide/show)

Results:

Anne Amelie Polly Alice Martha

3.{#for}

Syntax:

{#for |VAR| = |CODE| to |CODE| [step=|CODE|]}..{#else}..{#/for}

Using as:

{#for |variable| = |start| to |end| [step=|stepBy|]}..{#else}..{#/for}

|variable| - name of variable, ex: i, index (please not use
javascript's reserved words).

|start| - loop begin value, ex: 1, $T.start

|end| - loop end value, ex: 10, $T.end

|stepBy| - step, ex: 1, -1 (downto)



Examples:

{#for index = 1 to 10} {$T.index} {#/for}

Result:

1 2 3 4 5 6 7 8 9 10

{#for index = 1 to 10 step=3} {$T.index} {#/for}

Result:

1 4 7 10

{#for index = 1 to 10 step=-3} {$T.index} {#else} nothing {#/for}

Result:

nothing

{#for index = 10 to 0 step=-3} {$T.index} {#/for}

Result:

10 7 4 1

$("#result").setTemplate("{#for index = $T.start to $T.end}
{$T.content}{$T.index}<br/> {#/for}");

$("#result").processTemplate({start: 2,
end: 5, content: "ID:
"});

ID: 2

ID: 3

ID: 4

ID: 5

Code:

Data: (click to hide/show)

Results:

Message: 1

Message: 2

Message: 3

Message: 4

Message: 5

Message: 6

Message: 7

Message: 8

API

4.
{#include}

Include other template.

{#include |NAME| [root=|VAR|]}

Examples:

var template1 = $.createTemplate('<b>{$T.name}</b>
({$T.age})');

$('#result').setTemplate('{#include t1 root=$T.table[0]}', {t1: template1});

$('#result').processTemplate(data);

Result:

Anne (22)

var template1 = $.createTemplate('<div><b>{$T.name}</b>
({$T.age})</div>');

$('#result').setTemplate('{#foreach $T.table as row}{#include t1 root=$T.row}{#/for}', {t1: template1});

$('#result').processTemplate(data);

Result:

Anne (22)

Amelia (24)

Polly (18)

Alice (26)

Martha (25)

Code:

Data: (click to hide/show)

Results:

Anne (22)

API

5.
multiple
templates

Since jTemplates 0.2 allowed is using multiple templates
in one file.



Example:

*** main template *** (all part outside templates are invisible}

{#template MAIN}

 <div>

  <div>{$T.name.bold()}</div>

  {#include table root=$T.table}

 </div>

{#/template MAIN}



-----------------------------------------



*** main table ***

{#template table}

 <table>

  {#foreach $T as r}

  {#include row root=$T.r}

  {#/for}

 </table>

{#/template table}



-----------------------------------------



*** for each row ***

{#template row}

 <tr bgcolor="{#cycle values=['#AAAAEE','#CCCCFF']}">

  <td>{$T.name.bold()}</td>

  <td>{$T.age}</td>

  <td>{$T.mail.link('mailto:'+$T.mail)}</td>

 </tr>

{#/template row}

Above template in file: example_multitemplate1.tpl

---

Subtemplates can use different setting than main one. Current implementation
does not allow to change most settings, like filter_data, etc, thus this
feature are not really useful. Example:

{#template item runnable_functions=false}

...

{#/template list}

Code:

Data: (click to hide/show)

Results:

User list

Anne	22	anne@domain.com
Amelie	24	amelie@domain.com
Polly	18	polly@domain.com
Alice	26	alice@domain.com
Martha	25	martha@domain.com

API