Help us understand the problem. What is going on with this article?

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

More than 5 years have passed since last update.

前回の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について書く予定です。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした