tamulab.jp

tamulabはプログラミングのtipsやインターネット上で気になったことなどを書いてます

JavaScript テンプレートエンジン SNBinder について

calendar

reload

view 75 views

最近は、仕事上でjavascripなコーディングとかが増えてきてる。

別にいいんだけど、JSONで取得したものをブラウザ上に表示するときに困るのが見た目の問題ですよね。
divとかを $(“<div>”) ってしてaddClass() とか……これだと結構めんどくさいことに。

それでJavaScriptでSmartyみたいなテンプレートエンジンがあれば問題はほぼ解決できるんじゃないかと。

で「javascript template」でググってたら見つけたのが SNBinder です。

テンプレート部分はajaxで別ファイルから読み込むこともできるし、テンプレートに入れる値もわざわざ$.ajax()とかしなくても、SNBinderで一気にJSON取得→テンプレートファイル取得→表示までできちゃいます。

ただ、作者の方も書かれているようにテンプレート部分ではbindされた値をどこに入れるかだけで条件分岐や繰り返しの処理(ifやforeachとか)は出来ないことになっています。
それをやるならJavaScript側で取得したJSONを元に処理してから渡してやればいいだけの話ですしね。

で簡単に使ってみたのですが、気になったのがREADMEのこの部分

templates(“main” っていうところは templates.main が正しいんじゃないかと。

使ってみた感想ですが、分かりやすいですし使いやすいです。
テンプレート部分を1つのファイルに纏めておけるというのもトラフィックが増えなくていいと思います。

※この記事は T.T.Soft Development Studio で 2011/05/20 に公開した記事を移設したものです。
元記事: http://ttsoft.jp/2011/05/javascript-template-snbinder/

この記事をシェアする

about

Toru TAMURA

Toru TAMURA

PHP, Ruby などをあやつるWebエンジニアです。Amazon Web Service(AWS)のユーザーグループ JAWS-UG 島根支部所属 [詳細]