Handlebars.jsで長すぎる文字列を縮めるヘルパーを作る。

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の世界なので、やれることがぐっと広がります！