Hogan.js入れたので使い方メモ

Hogan.jsはTwitter製のJSテンプレートエンジンです。
http://twitter.github.io/hogan.js/
シンプルでとても使いやすいのでおすすめです！
サンプルとしてユーザ情報をテンプレートに渡して表示します。

hogan.js読み込む

index.html

<script type="text/javascript" src="/js/hogan.js"></script>

まあ、そのままですね。

テンプレート準備

index.html

<script type="text/template" id="tpl_user">
{{! コメントできるよ }}
<ul>
    <li>
        <div>{{name}}</div>
        <div>{{age}}</div>
        <div>{{gender}}</div>
        <div>{{phone}}</div>
    </li>
</ul>
</script>

セレクタ
テンプレートにセレクタ追加
ex.) id="tpl_user"

・変数
{{ }}で囲むことで変数が扱えます
ex.) {{name}}

・コメント
{{! }}でコメントできます

レンダーする

app.js

var tpl  = Hogan.compile($('#tpl_user').text());
var html = tpl.render({
               name: 'Jack',
               age : 20,
               gender : 'male',
               phone : '09012345678',
           });
$('#user_list').append(html);

テンプレートのセレクターを指定して、テキストに戻してからcompileします。
renderするときに変数渡してhtmlに変換されます。
これでブラウザに表示されます。
以下で動作確認ができます。
https://jsfiddle.net/rukurx/gzk3tdLh/

コメント

{{! }}内に記述することでコメントができます

ifステートメントとif elseステートメント

変数がbool型を使えば条件分岐ができる
変数is_activeがtrueの場合ユーザを表示して。falseならidだけ表示してます。

.index.html

<script type="text/template" id="tpl_user">
<ul class="user-ul">
    {{#is_active}}
        <li>{{id}}</li>
        <li>{{name}}</li>
        <li>{{age}}</li>
    {{/is_active}}
    {{^is_active}}
        <li>{{id}}</li>
        <li>-</li>
        <li>-</li>
        <li>-</li>
    {{/is_active}}
</ul>
<script>

・ifの場合
{{#is_active}} {{/is_active}}
・if elseの場合
{{#is_active}} {{/is_active}} {{^is_active}} {{/is_active}}
^はelseではなく否定になるので、無理やりですが...

foreachステートメント

配列でforeachを使って要素を取り出せます
ここではusers配列をテンプレート内でループして表示してます。

app.js

var users = [
        {'id':1, 'name': 'Alex', 'age':20, 'gender': 'male', 'is_active': true},
        {'id':2, 'name': 'Ben', 'age':25, 'gender': 'male', 'is_active': false},
        {'id':3, 'name': 'Cony', 'age':30, 'gender': 'female', 'is_active': true}
    ];

var tpl = Hogan.compile($('#tpl_user').text());
var html = tpl.render({
               users: users
           });
$('#user_list').append(html);

index.html

<script type="text/template" id="tpl_user">
{{#users}}
    <ul class="user-ul">
        <li>{{id}}</li>
        <li>{{name}}</li>
        <li>{{age}}</li>
    </ul>
{{/users}}
<script>

・foreachの場合
{{#users}} {{/users}}
!! なんと記述の仕方がifと同じですね。変数が配列の場合はforeachになります

ifとforeachでの動作確認は以下よりできます。
https://jsfiddle.net/rukurx/821sxzfq/

その他

変数がObjectの場合にプロパティへのアクセス方法。普段からJS書いてる方は特に迷わないかもしれませんが念のため。

app.js

var user = {'id':1, 'name': 'Alex', 'age':20, 'gender': 'male', 'is_active': true};

var tpl = Hogan.compile($('#tpl_user').text());
var html = tpl.render({
               user: user
           });
$('#user_list').append(html);

index.html

<script type="text/template" id="tpl_user">
    <ul class="user-ul">
        <li>{{user.id}}</li>
        <li>{{user.name}}</li>
        <li>{{user.age}}</li>
        <li>{{user.gender}}</li>
    </ul>
<script>

まだ他にも機能あるようですが、これだけ覚えただけでも十分に使えると思います。
自分は今のところこれだけで事足りてます。そのうち使うかもしれませんが....