最近は、仕事上でjavascripなコーディングとかが増えてきてる。
別にいいんだけど、JSONで取得したものをブラウザ上に表示するときに困るのが見た目の問題ですよね。
divとかを $(“<div>”) ってしてaddClass() とか……これだと結構めんどくさいことに。
それでJavaScriptでSmartyみたいなテンプレートエンジンがあれば問題はほぼ解決できるんじゃないかと。
で「javascript template」でググってたら見つけたのが SNBinder です。
テンプレート部分はajaxで別ファイルから読み込むこともできるし、テンプレートに入れる値もわざわざ$.ajax()とかしなくても、SNBinderで一気にJSON取得→テンプレートファイル取得→表示までできちゃいます。
ただ、作者の方も書かれているようにテンプレート部分ではbindされた値をどこに入れるかだけで条件分岐や繰り返しの処理(ifやforeachとか)は出来ないことになっています。
それをやるならJavaScript側で取得したJSONを元に処理してから渡してやればいいだけの話ですしね。
で簡単に使ってみたのですが、気になったのがREADMEのこの部分
SNBinder.get_named_sections("/static/templates.htm", null, function(templates) {
var user = { "name":"Leonardo da Vinci" };
$('.body').html(SNBinder.bind(templates("main", user));
});
templates(“main” っていうところは templates.main が正しいんじゃないかと。
使ってみた感想ですが、分かりやすいですし使いやすいです。
テンプレート部分を1つのファイルに纏めておけるというのもトラフィックが増えなくていいと思います。
