なぜテンプレートが必要なのですか？
サーバースクリプトの場合と同様に、テンプレートエンジンの主なタスクは、コードをプレゼンテーション（HTMLマークアップなど）から分離することであり、Javaスクリプトでも同様の役割を果たします。 まあ、コードを書く方が便利になります。
テンプレートエンジン-テンプレート
Mohawkのテンプレートコードはkernel / Template.jsファイルにあり、デフォルトで接続されています。 テンプレートエンジン自体はTemplateオブジェクトであり、2つのメソッドを使用します。
-空のテンプレート。 assign （文字列名、混合値）
-文字列テンプレート。 変換 （文字列テンプレート）
説明から推測できるように、最初のメソッドは、変数としてテンプレートエンジンに変数を割り当て、引数として変数の名前とその値を取ります。 さらに、値は何でもかまいません：数値、文字列、オブジェクトなど。 2番目のメソッドは、テンプレートを直接変換し、変換の結果を返します。
以下の例では、非常に単純ですが、同時に便利なテンプレート言語について説明します。 テンプレートを定義するために、組み込み関数includeTemplate（name）を使用します。これは、name.tmplという名前のテンプレートフォルダーからファイルをロードし、テンプレートの内容をNAME変数に割り当てます。
可変出力
そのため、指定された変数の出力は、{％name}構成を介して実行されます。ここで、nameは変数の名前です。
例：
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 .
具体的な例を示しましょう。ユーザーのメールボックスにある文字の数を表示する必要があります。
テンプレート： 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 .
結果（ str変数の値）：
< p > You have < strong > 5 </ strong > emails </ p >
* This source code was highlighted with Source Code Highlighter .
状態
条件付き結論は、構文{％if condition} ... {％end}によって実行されます
例（ cond.tmpl ）：
{%if num > 0}
< p > You have < strong > {%num} </ strong > emails </ p >
{%end}
* This source code was highlighted with Source Code Highlighter .
Javascript（すでに変数numに値を割り当てているので、ここで続行します）：
includeTemplate( 'cond' );
str = Template.transform(COND);
* This source code was highlighted with Source Code Highlighter .
結果は前の例と同様になります、なぜなら num = 5> 0：
< p > You have < strong > 5 </ strong > emails </ p >
* This source code was highlighted with Source Code Highlighter .
ボックスに文字がないと仮定します。 次に、テンプレートに2つのオプションが必要です。これらのオプションは、文字がある場合とない場合に使用します。 これを行うには、構造{％if condition} ... {％else} ... {％end}を使用します
例（ 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（num変数の値をゼロに変更）：
includeTemplate( 'contra' );
Template.assign( 'num' , 0);
str = Template.transform(CONTRA);
* This source code was highlighted with Source Code Highlighter .
結果：
< p > Your mailbox is empty :( </ p >
* This source code was highlighted with Source Code Highlighter .
サイクル
どうぞ メールボックスの内容を表示する必要があります。 最終的にコンテンツがemails配列に書き込まれるようにします。 テーブルに配列を出力するには、ループ構造を使用します：{％for elem in array} ... {％end}-ここで、 elemは配列の要素であり、 arrayは配列自体です。
最初の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 .
次にテンプレート（ 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 .
そして最後に、結果：
< 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 .
アドレス帳を表示する必要があるとします。 本を変数bookに記述します。これは、キー（人の名前）-値（電子メール）の構造を持つ連想配列（ハッシュ）です。 要素だけでなくキーによって配列を反復するには、{％for elem in array => key} ... {％end}という構造を使用します。
例：
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 .
テンプレート（ 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 .
結果：
< 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 .
変数修飾子
さて、そして最後に。 たとえば、電子メールを出力するとき。 アドレス帳にあるメールの場合、自動的にリンクに変換します。 変数を変更するために、構造が使用されます：{％name | function}-すなわち 関数functionは名前変数に適用されます。
最後の例：
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 .
テンプレート（ 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 .
結果：
< 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 .
結論として
テンプレートエンジンを使用すると、プロジェクトコードを整理し、開発速度を上げることができます。
Mohawkはここからダウンロードできます： irokez.org/download/mohawk
そして、フレームワークについての入門記事はこちら： habrahabr.ru/blogs/irokez_cms/53778