Handlebars.jsは、JavaScriptを用いてクライアントサイドでHTMLを生成するテンプレートエンジンです。
JavaScriptで簡単に動かせるクライアントサイドテンプレートエンジンHandlebars.js
Handlebars.js単体ではそれほど複雑なHTMLは生成できず、オブジェクトに対して特別な処理を加えて表示する場合などは、ヘルパーと呼ばれるマクロを追加する必要があります。
registerHelper関数でヘルパーを登録する
今回は、長すぎる文字列を縮めるためのtruncate関数が使いたかったので、以下のようにヘルパーを作りました。
Handlebars.registerHelper('truncate', function(string, length) {
if (string.length <= length)
return string;
return string.substring(0, length) + '...';
});
registerHelperが、ヘルパーを登録するための関数です。第1引数がヘルパー名、第2引数が実際の処理となっています。テキトーにhanlderbars.truncate.jsなどいうファイルを作成し、Handlebars.jsの後に読み込ませます。
テンプレートでヘルパーを使う
このヘルパーは、長すぎるトークンを32文字くらいでテキトーに切り詰めたいという要求で作りました。実際に使うときは以下のように、truncateというヘルパー名を指定します。
{{id}}
{{truncate token 32}}
ヘルパー名の後ろは実際の処理として指定した関数に引数として渡ります。
動かしてみた。
こんな感じになりました。
ちゃんとトークンが切り詰められています。
パラメータとして渡すことさえできれば、あとはJavaScriptの世界なので、やれることがぐっと広がります!
コメント