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

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

Published on 2011/05/20 by in JavaScript

最近は、仕事上で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つのファイルに纏めておけるというのもトラフィックが増えなくていいと思います。

 
 Share on Facebook Share on Twitter Share on Reddit Share on LinkedIn
No Comments  comments 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

© ttsoft.jp
credit