ルーターによる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について書く予定です。

Rendr入門(2): リクエスト処理の流れ（Router, Controller、View、Template）

ルーターによるURLのルーティング

コントローラ

ビュー

テンプレート

rendr-cli

まとめ