読者です 読者をやめる 読者になる 読者になる

望月いちろうのREADME.md

書き溜めておいた技術記事や旅行記のバックアップです。

Node.jsのテンプレートエンジン - ECTの使い方

ECTの使い方は非常にシンプル

基本的にはCoffeeScriptと同じ構文

if else for文などはpythonと同じように:で区切る。

配列を展開する。

links: [
{ name : 'Google', url : 'http://google.com/' },
{ name : 'Facebook', url : 'http://facebook.com/' },
{ name : 'Twitter', url : 'http://twitter.com/' }
],
//-----フレームブロック 
<% linkHelper = (link) -> %> //ブロック名と引数(ここではJSONオブジェクト)
<li><a href="<%- link.url %>"><%- link.name %></a></li>
<% end %>
//------------------------
<% if @links?.length : %> 
<ul>
<% for link in @links : %>
<%- linkHelper link %> //ブロック名と変数
<% end %>
</ul>
<% else : %>
<p>List is empty</p>
<% end %>

他のectパーツを部品として組み込む

//------ベースファイル
<!DOCTYPE html>
<html>
<head>
<title><%- @title %></title>
</head>
<body>
<% content %>
<% include 'footer' %>
</body>
</html>

//———<% include 'footer' %>の部分が以下の構文に展開される。
<div id="footer">
<div class="left">Generated by ECT</div>
<% content 'footer-info' %>
</div>

簡単な関数も使えます。

upperHelper : function (string) {
return string.toUpperCase();
}

<div id="<%- @id %>">
<h1><%- @upperHelper @title %></h1> //関数upperHelperにtitleが引数として渡される。
<% include 'list' %> //ここに別のテンプレートが展開される
</div>


<% block 'footer-info' : %>
<div class="right">page: main</div>
<% end %>

子テンプレートと基底テンプレートの連携

//-----基底テンプレート
<% content %> //ここに子テンプレートが展開される
———————————
//展開される子テンプレート
<% extend 'layout' %> //親テンプレートの名前

<% include 'list' %> //ここに別のテンプレートが展開される

block文を使用した少し複雑な例

<div id="footer">
<div class="left">Generated by ECT</div>
<% content 'footer-info' %> //block文で呼び出された場合、block~endで囲まれた部分がここに展開されてから、block~end文が
継承先のテンプレートに展開される。
</div>

<% block 'footer-info' : %>
<div class="right">page: main</div>
<% end %>