前回のRendrの概要紹介に続いて、ここではRendrでのリクエスト処理の流れを解説します。
Rendrアプリのスケルトンコード、rendr-app-templateを参考にします。
https://github.com/airbnb/rendr-app-template
※まだざっくりしてるので、頻繁にアップデートされます。不明な点は質問してください。
ルーターによるURLのルーティング
Rendrにリクエストを行うと、ルーターがURLに関連づけられたコントローラを呼び出します。
ルーターの設定は、app/routes.js で行います。Railsのconfig/routes.rbに相当します。
サンプル:
module.exports = function(match) {
match('', 'home#index');
match('repos', 'repos#index');
match('repos/:owner/:name', 'repos#show');
match('users' , 'users#index');
match('users/:login', 'users#show');
match('users_lazy/:login', 'users#show_lazy');
};
match()に渡す引数の一つ目がURLパターン、二つ目がコントローラとアクションを表しています。URLパターンで:parameterと書く事で、マッチした文字列をクエリパラメータをコントローラに渡す事が出来ます。
コントローラ
コントローラは、リクエストに対するデータ取得とビューの呼び出しを担当します。
app/controllersの下にファイルを作成していきます。
ルーティングファイルの'users#index'から呼び出されるのが、下記の関数です。アクション毎に関数を定義します。
サンプル(app/controllers/users_controller.js):
module.exports = {
index: function(params, callback) {
var spec = {
collection: {collection: 'Users', params: params}
};
this.app.fetch(spec, function(err, result) {
callback(err, result);
});
}
}
ここでは、Backbone.Collection形式でデータ(Users)を取得しています。this.app.fetchは、サーバ側とクライアント側でのデータfetchを抽象化するrendrの機能です。実際のデータ・レイヤーについては、話が複雑になるので別途解説します。
fetchが成功したらcallbackを呼び出してビューにデータを渡します。
ビュー
テンプレートへのデータの受け渡しと、クライアント側での動作を記述するのがBackbone.Viewを拡張する「ビュー」の役割です。app/viewsの下にファイルを作成します。
ここでは、ひとまずサーバ側でのデータの受け渡しを見て行きます。
サンプル(app/views/users/index.js):
module.exports = BaseView.extend({
className: 'users_index_view'
});
module.exports.getTemplateData = function(){
data = BaseView.prototype.getTemplateData.call(this);
return data;
};
module.exports.id = 'users/index';
module.exports.idの部分を、コントローラとアクションに対応させます。
ビューに遷移した段階でgetTemplateData()が呼ばれ、コントローラでfetchされたオブジェクトがBackbone.Collection/Backbone.Modelに変換されます。
コントローラで「collection」「model」の名前でfetchしたものは、自動的にビューに渡るデータとして変換されます。つまり、ひとつのビューに対して一つのColleciton/Modelを自動で割り当てる事ができます。この辺は、現在も仕様が激しく変わっているところで、複数のCollection/Modelを受け渡すことができるようになるようです。getTemplateData()を上書きする事で、独自のデータセットを作る事もできます。
テンプレート
テンプレートはapp/templatesの下に作成します。ビューから渡されたデータをレンダリングします。
標準ではHandlebarsを使用していますが、Rendr用にラッパーモジュールを書いて他のエンジンを使う事もできます。
サンプル:
<h1>Users</h1>
<ul>
{{#each models}}
<li>
<a href="/users/{{login}}">{{login}}</a>
</li>
{{/each}}
</ul>
rendr-cli
rendrのプロジェクトファイル作成をコマンドラインから行うツール。実はまだ使った事無いので、使ってからまた詳細を書きます。
https://github.com/technicolorenvy/rendr-cli
まとめ
Rendrにおけるリクエスト処理の流れを解説しました。
-
app/routes.jsでルーティングを行う。 -
app/controllers/*_controller.jsにあるコントローラのロジックが呼び出される。 -
app/views/の下の対応したビューが呼び出されて、テンプレートにデータが渡る。 -
app/templates/の下のテンプレートがレンダリングされる。
という、一連の流れとそれぞれのパートの連携のキーを理解頂けたでしょうか？
これでひとまず、自分の作りたいアプリケーションを実装する「基礎」が分かったと思います。
次回は、データの取得を行うDataLayerについて書く予定です。