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

2012/10/31（12年前） 2017/1/2 未分類 938

この記事は公開されてから8年経過しています。現在とは内容が異なる場合がありますのでご注意ください。
最新の記事や関連記事をお探しの方は下の「サイト内検索」で検索してみてください。

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

別にいいんだけど、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));
});

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

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