SNBinder はJavaScriptで実装されたクライアントサイドのテンプレートエンジンです。サーバーサイドのテンプレートエンジンと同じようなものです。view(HTML template)がJavaScriptオブジェクトのデータを用いてHTML textを生成します。
SNBinderでは、クライアントサイドのデータバインディングという方法が非常に柔軟な開発環境に一役買っており、それによってデスクトップアプリケーションのようなユーザー体験をもたらすことができます。興味があれば以下の記事を御覧ください。
http://www.facebook.com/note.php?note_id=179569622077334
このライブラリを使用したデモアプリ "Fruence (facebookユーザのためのグループウェアアプリ)" を作成しました。
SNBinder はjQueryを必要とします。また、SNBinderをロードする前に必ずjQueryをロードしてください。
JQueryとSNBinderのロードが完了したら、"init"メソッドを呼び出し初期化を行って下さい
$(document).ready(function() {
SNBinder.init({});
}
初期化メソッドは、いくつかのオプションがあります。"6. 初期化(アドバンス)"セクションを参考にしてください。
JavaScriptをHTML templateに埋め込むには、SNBinder.bind()メソッドをコールします。:
var template = "<p>Hello $(.name)!</p>";
var user = { "name":"Leonardo da Vinci" };
$('.body').htm(SNBinder.bind(template, user));
このサンプルでは、<body>タグ内に"<p>Hello Leonardo da Vinci!</p>" が表示されます。
もし複数のオブジェクトに同じテンプレートを適用したいのならば、コンパイル済みの形式を使用して変数を展開します。:
var template = "<p>Hello $(.name)!</p>";
var apply_template = SNBinder.compile(template);
var user1 = { "name":"Leonardo da Vinci" };
var user2 = { "name":"Michelangelo di Lodovico Buonarroti Simoni" };
$('.div#user1').htm(apply_template(user1));
$('.div#user2').htm(apply_template(user2));
もちろん、配列にテンプレートを埋込むことも可能です:
var template = "<li>Hello $(.name)!</li>";
var users = [
{ "name":"Leonardo da Vinci" },
{ "name":"Michelangelo di Lodovico Buonarroti Simoni" },
{ "name":"LDonato di Niccol嘆 di Betto Bard" }
];
$('.ul').htm(SNBinder.bind_rowset(template, users);
以下の様な、テンプレートの置換も可能です:
$(.foo) will be replaced by the value of property "foo" (escaped) $(_foo) will be replaced by the value of property "foo" (non-escaped) $(index) will be replaced by the index (in case or bind_rowset)
上述のサンプルコードのように、javascriptの中にハードコーディングしたHTMLテンプレートを埋め込みたいこともあるでしょう。しかし、Viewと制御部分(javascript)をごちゃ混ぜにするのはあまりよくありません。そこで、SNBinderでは、2つの補助関数を提供します。これらを使用することで、一度のHTTP GETに対して複数のテンプレートを読み込むことが可能になります。
SNBinder.get_sections(url, callback) SNBinder.get_named_sections(url, callback)
get_sectionsで読み込むことにより、テンプレートバンドル、すなわち"{%}"で繋がれたテンプレート列が任意のURLから読み込みまれます。そしてテンプレート列を含むコールバック関数が返されます。
また、get_named_sectionsによって"{%}...{%}"で特定される名前を持つテンプレートのバンドルも読み込まれ、テンプレートの辞書、 すなわち以下のようなテンプレートバンドルを含むコールバック関数が返されます。
{%}main{%}
<p>Hello $(.name)!</p>
次のコードは上記テンプレートバンドルを読み込み、Section2で記述された内容をバインドしたviewデータと同等の振るまいをします。
SNBinder.get_named_sections("/static/templates.htm", function(templates) {
var user = { "name":"Leonardo da Vinci" };
$('.body').htm(SNBinder.bind(templates("main", user));
});
SNBinderは、HTTP経由で簡単にJSONデータを読み込む為の補助関数を提供します。:
SNBinder.get(url, params, isJson, callback, options);
SNBinder.post(url, params, isJson, callback);
url: url to get/post the data from/data
params: url parameters (JavaScript object)
isJson: true if the server returns a JSON data
callback: callback function that processes the data (if isJson is false) or json and data (if isJson is true)
options: optional parameters to control the cache (default is {bypass_cache:false, cache_result:true} )
例えば、"/user/info"のレスポンスがユーザデータ（例えば{"name":"Leonardo da vinci"})のJSONオブジェクトだったら、前セクションの例は下記のように記述することができます。
SNBinder.get_named_sections("/static/templates.htm", function(templates) {
SNBinder.get("/user/info", nil, true, function(user) {
$('.body').htm(SNBinder.bind(templates("main", user));
});
});
SNBinderでは、メモリ内にキャッシュされたデータやテンプレートをget()メソッドで取得することが可能です。また、それらの利用を制御することも可能です:
flush_all(): flush all the cached data flush(url, params): flush associated with url + url parameters
アプリケーションがSNBinder.getやSNBinder.postをコール(isJson=trueであり、且つサーバーが"login_required"プロパティtrueでJSONオブジェクトを返す状態とする)するとき、SNBinderはSNBinder.init()のオプションパラメータで特定される"login"関数をコールします。