emberJs のRouter 分かりにくいんだけど
イシュー
- 最近のJSフレームワークは学習コストが高くて萎える
- 学習コストが高いというのは、「概念が難しい」というよりは、「暗黙の決め事(CoC)は覚えるしかない」という記憶のコストが高い。(理系のおいらは基本的に記憶しないし、かつメモリが少ない(すぐ忘れる))
EmberJSのチュートリアルより
Todos.Router.map(function () { this.resource('todos', { path: '/' }, function () { // additional child routes will go here later }); });
In js/router.js update the router to change the todos mapping, with an additional empty function parameter so it can accept child routes, and add this first index route:
- js/router.jsにて、todosのマッピングを変更するために、追加の空の関数パラメーターでRouterを更新します。そうすることで、Routerは子ルートを受け入れ、この最初のindex ルートを追加します。
まずmapとは何ぞや?
The Router.map function allows you to define mappings from URLs to routes and resources in your application. These mappings are defined within the supplied callback function using this.resource and this.route.
- Router.map 関数は、あなたのアプリケーションに、URLsから、ルートやリソースへのマッピング定義することを許可します。
- これらのマッピングは、コールバックファンクションとして提供される this.resource や this.route を用いて定義されます。
App.Router.map(function() { this.route("about"); this.route("favorites", { path: "/favs" }); });
なにこのthis.route って??
You should use this.resource for URLs that represent a noun, and this.route for URLs that represent adjectives or verbs modifying those nouns. For example, in the code sample above, when specifying URLs for posts (a noun), the route was defined with this.resource('posts'). However, when defining the new action (a verb), the route was defined with this.route('new').
- あなたは名詞を表すURLとしてthis.resourceを使用すべきだし、形容詞またはそれらの名詞を修飾する動詞を表すURLとしてthis.routeを使用するべきです。
- たとえば、上記のコードサンプルでは、特別なURL(名詞を)post するためのに、ルートはthis.resource( 'post')で定義されました。
- しかし、新しいアクション(動詞)を定義するときは、ルートがthis.route( 'new')で定義されました。
参考
- 埋め込みのパラメータによるRouting – Ember.js入門(17) | Developers.IO
- Ember.js - Ember.Routerによる、アプリケーション状態遷移/管理 - Qiita
- Ember.js - Ember.Routerは入れ子構造にできる - Qiita
- Routingの基本 – Ember.js入門(2) | Developers.IO
- 第2回 URLと画面表示(RoutingとTemplates):実践入門 Ember.js|gihyo.jp … 技術評論社
- 第3回 画面遷移(Routing):実践入門 Ember.js|gihyo.jp … 技術評論社
- ApplicationRoute -> PostsRoute -> PostsShowRoute
ember-cli におけるrouter
参考
- emberJs guide の記載
- Ember.js - Routing: Introduction
- Ember.js - Routing: Redirecting
Ember.Router.extend({ rootURL: '/blog/' });
- ember-cli (app/router.js)での書き方?