Mohawk / Templates

In this article I will talk about the template mechanism that is used in the Mohawk JS framework.

Why do you need template making?

As in server scripts, the main task of the template engine is to separate the code from the presentation (for example, HTML markup), and in Java scripts it plays a similar role. Well, and it also becomes more convenient to write code.

Template Designer

The template code in Mohawk is located in the kernel / Template.js file and is connected by the default framework. The template engine itself is a Template object, in which we will use two methods:
- void Template. assign (String name, mixed value)
- String Template. transform (String template)
')
As you can guess from the description, the first method assigns variables to the template engine, taking as arguments the variable name and its value. In this case, the value can be anything: a number, a string, an object, etc. The second method directly transforms the pattern and returns the result of the transformation.

Further in the examples I will describe a very simple, but at the same time convenient template language. For the convenience of setting templates, I use the includeTemplate (name) built-in function, which loads the file from the template folder named name.tmpl and assigns the contents of the template to the NAME variable.

Variable Output

So, the output of a given variable is done through the construction {% name}, where name is the name of the variable.
Example:

Template.assign( 'foo' , 'bar' ); // foo bar
var str = Template.transform( 'foo is {%foo}' ); // str = 'foo is bar'

* This source code was highlighted with Source Code Highlighter .

Let's try to present a specific example: we need to display the number of letters in the user's mailbox.
Our template: var.tmpl

< p > You have < strong > {%num} </ strong > emails </ p >

* This source code was highlighted with Source Code Highlighter .

Javascript:

includeTemplate( 'var' );
Template.assign( 'num' , 5);
var str = Template.transform(VAR);

* This source code was highlighted with Source Code Highlighter .

Result ( str variable value):

< p > You have < strong > 5 </ strong > emails </ p >

* This source code was highlighted with Source Code Highlighter .

Condition

The conditional output is performed via the {% if condition} ... {% end} construct

Example ( cond.tmpl ):

{%if num > 0}
< p > You have < strong > {%num} </ strong > emails </ p >
{%end}

* This source code was highlighted with Source Code Highlighter .

Javascript (we have already assigned the value of the variable num , so here we just continue):

includeTemplate( 'cond' );
str = Template.transform(COND);

* This source code was highlighted with Source Code Highlighter .

The result will be similar to the previous example, since num = 5> 0:

< p > You have < strong > 5 </ strong > emails </ p >

* This source code was highlighted with Source Code Highlighter .

Suppose there are no letters in the box. Then we need two variants of the template, which we will use in the presence of letters and their absence. To do this, use the {% if condition} ... {% else} ... {% end}

Example ( contra.tmpl ):

{%if num > 0}
< p > You have < strong > {%num} </ strong > emails </ p >
{%else}
< p > Your mailbox is empty :( </ p >
{%end}

* This source code was highlighted with Source Code Highlighter .

Javascript (change the value of the variable num to zero):

includeTemplate( 'contra' );
Template.assign( 'num' , 0);
str = Template.transform(CONTRA);

* This source code was highlighted with Source Code Highlighter .

Result:

< p > Your mailbox is empty :( </ p >

* This source code was highlighted with Source Code Highlighter .

Cycles

Go ahead. We need to display the contents of the mailbox. Let the content be written to the emails array as a result. To output an array to a table, we use the loop construction: {% for elem in array} ... {% end} - where elem is an element of the array and array is the array itself.

First javascript:

var emails = [
{ 'from' : 'boss@example.com' , 'subject' : 'When will you finish the project??' },
{ 'from' : 'me@example.com' , 'subject' : 'Reminder: finish the project' },
{ 'from' : 'spam@example.com' , 'subject' : 'You have WON 1000000 dollars!' }
];
Template.assign( 'emails' , emails);

includeTemplate( 'loop' );
str = Template.transform(LOOP);

* This source code was highlighted with Source Code Highlighter .

Now the template ( loop.tmpl ):

{%if emails.length > 0}
< p > You have < strong > {%num} </ strong > emails </ p >

< table >
< thead >
< tr >
< th > From </ th >
< th > Subject </ th >
</ tr >
</ thead >
< tbody >
{%for email in emails}
< tr >
< td > {%email.from} </ td >
< td > {%email.subject} </ td >
</ tr >
{%end}
</ tbody >
</ table >

{%else}
Your mailbox is empty :(
{%end}

* This source code was highlighted with Source Code Highlighter .

And finally, the result:

< p > You have < strong > 0 </ strong > emails </ p >
< table >
< thead >
< tr >
< th > From </ th >
< th > Subject </ th >
</ tr >
</ thead >
< tbody >

< tr >
< td > boss@example.com </ td >
< td > When will you finish the project?? </ td >
</ tr >

< tr >
< td > me@example.com </ td >
< td > Reminder: finish the project </ td >
</ tr >

< tr >
< td > spam@example.com </ td >
< td > You have WON 1000000 dollars! </ td >
</ tr >

</ tbody >
</ table >

* This source code was highlighted with Source Code Highlighter .

Suppose we need to display the address book. Let the book be written in the variable book , which is an associative array (hash) with the structure: key (person's name) - value (e-mail). To iterate an array, not only by elements, but also by keys, we use the construction: {% for elem in array => key} ... {% end}.

Example:

var book = {
'Alice' : 'alice@example.com' ,
'Bob' : 'bob@example.com' ,
'Carol' : 'carol@example.com'
};
Template.assign( 'book' , book);

includeTemplate( 'loop2' );
str1 = Template.transform(LOOP2);

* This source code was highlighted with Source Code Highlighter .

Template ( loop2.tmpl ):

< table >
< thead >
< tr >
< th > Name </ th >
< th > Email </ th >
</ tr >
</ thead >
< tbody >
{%for email in book = > name}
< tr >
< td > {%name} </ td >
< td > {%email} </ td >
</ tr >
{%end}
</ tbody >
</ table >

* This source code was highlighted with Source Code Highlighter .

Result:

< table >
< thead >
< tr >
< th > Name </ th >
< th > Email </ th >
</ tr >
</ thead >
< tbody >

< tr >
< td > Alice </ td >
< td > alice@example.com </ td >
</ tr >

< tr >
< td > Bob </ td >
< td > bob@example.com </ td >
</ tr >

< tr >
< td > Carol </ td >
< td > carol@example.com </ td >
</ tr >

</ tbody >
</ table >

* This source code was highlighted with Source Code Highlighter .

Variable Modifiers

Well, and finally. For example, when displaying email. mail in the address book, we want to automatically turn it into a link. In order to modify a variable, the construction is used: {% name | function} - i.e. the function function will be applied to the variable name .

Last example:

var linkify = function (email) {
return '<a href="mailto' + email + '">' + email + '</a>' ;
}

includeTemplate( 'mod' );
str = Template.transform(MOD);

* This source code was highlighted with Source Code Highlighter .

Template ( mod.tmpl ):

< table >
< thead >
< tr >
< th > Name </ th >
< th > Email </ th >
</ tr >
</ thead >
< tbody >
{%for email in book = > name}
< tr >
< td > {%name} </ td >
< td > {%email|linkify} </ td >
</ tr >
{%end}
</ tbody >
</ table >

* This source code was highlighted with Source Code Highlighter .

Result:

< table >
< thead >
< tr >
< th > Name </ th >
< th > Email </ th >
</ tr >
</ thead >
< tbody >

< tr >
< td > Alice </ td >
< td >< a href ="mailtoalice@example.com" > alice@example.com </ a ></ td >
</ tr >

< tr >
< td > Bob </ td >
< td >< a href ="mailtobob@example.com" > bob@example.com </ a ></ td >
</ tr >

< tr >
< td > Carol </ td >
< td >< a href ="mailtocarol@example.com" > carol@example.com </ a ></ td >
</ tr >

</ tbody >
</ table >

* This source code was highlighted with Source Code Highlighter .

Finally

The template engine allows you to organize the project code, as well as increase the speed of development.
Download Mohawk here: irokez.org/download/mohawk
And the introductory article about the framework was here: habrahabr.ru/blogs/irokez_cms/53778