Template engine

The template engine files are saved in the code/views/ folder of the project, and can be used both on the server side and on the client side.

Data output

Pre-filling with data:

// using on server, in some controller
this.pagename="My page";
this.info={body:"main block",image:"/1.jpg"};

Using data in the html file:

<div>
<h1>{{pagename}}</h1>
<div><img src="{{info.image}}"></div>
<p>{{info.body}}</p>
</div>

Using modifiers in output

Lattenoir has a number of modifiers pre-built, and new ones can be added.

Template engines can be used sequentially one after another.

A few examples of standard modifiers (full list):

<div>
{{T:varname}} - replaces &lt; &gt; &amp; to &amp;lt; &amp;gt; &amp;amp; (converts to plain text).
{{B:varname}} - executes T: and also replaces all \n to &lt;br/&gt;
{{preview("10C"):imgname}} - replaces /abc/image.jpg to /abc/image-preview10C.jpg
{{JSON:preview("10C"):imgname}} - calls preview first, then calls JSON
{{format("06G2":price}} - formats price in format 000 002.00, 1 234 567.89
</div>

if and unless conditions

By default, the conditions test the variable against the JavaScript true/false rules. In particular, the values undefined, null, false, 0, "" are interpreted as false, and the values 1, true, and "0" are interpreted as true.

<h1>A simple condition, checking a.value is true</h1>
<div>{{if a.value}} a.value is defined and not equal to 0 or "" {{/if}}</div>

<h1>A simple condition, checking a.value is not true</h1>
<div>{{unless a.value}}  a.value is  undefined, null, 0 or ""{{/unless}}</div>

<h1>Equality</h1>
<div>{{if a.value==10}} a.value==10{{/if}}</div>

<h1>Using if - else</h1>
<div>A value of a.value {{if a}}defined{{else}}not defined{{/if}}</div>

<h1>Using methods</h1>
<div>{{if a.method()}}Method a.method() has returned something{{/if}}</div>

foreach loop

A foreach loop allows you to iterate through an array of values. In this case, the service variable fields.foreach_i is set at each iteration to the number of the array element used, taking the values (0 .. array.length-1) in turn.

<table class="items">
  <tbody>
    {{foreach s in shops}}
    <tr>
      <td>{{ADD(1):fields.foreach_i}}</td>
      <td>{{s.city}}</td>
      <td><a href="{{action}}?mode=view&shop_id={{s.id}}">{{s.address}}</a></td>
    </tr>
    {{/foreach}}
  </tbody>
</table>

for loop

File /www/vahvarh/teajs.org/examples/framework/templates/template-engine/for.html does not exist

each condition

Used for tricky things inside foreach :) Checks whether the remainder of fields.foreach_i divided by A is equal to the value of B.

File /www/vahvarh/teajs.org/examples/framework/templates/template-engine/each.html does not exist

Inserting another template

Allows you to insert another template. The template is searched first in the project folder, then in the system folder. The template name is specified without the .html extension

code/views/pagetemplates/mypage.html

{{include "pagetemplates/_header"}}
<div class="page-body">
  <div class="main-block">{{text}}</div>
  <div>{{call Articles.short()}}</div>
</div>
{{include "pagetemplates/_footer"}}

Recursive insertion of another template

File /www/vahvarh/teajs.org/examples/framework/templates/template-engine/recurse.html does not exist

Outputting localized text

Text specified in this form will be searched in the translation file for the current site language.

code/views/controllers/Test/index.html

<div><input type="button" value="{{!Save data}}"></div>

Example translation file

i18n/en.js

exports.i18n={
    "controllers/Test":{
        "Save data":"Guardar datos"
    }
};

Calling controllers from a template

<h1>Execute controller NavRoot.index()</h1>
<div class="navigation-block">{{call NavRoot()}}</div>

<h1>Execute controller Articles.short(), with default template replacement "short" to "short2"</h1>
<div class="news-announce-block">{{call Articles.short({{short_view:"short2"}})}}</div>

<h1>Execute controller SomePage.some(), with additional arguments</h1>
<div class="call">{{call SomePage.some({a:124,b:11,c:cspace.somevar})}}</div>