YOSHINO日記

プログラミングに関すること

Ember.js入門6: 基本的なルーティング

emberでは名前が非常に重要である。

emberにおいても、Railsと同じく名前がとても大事な意味をもつ。

例えば、

create app/templates/helloworld.hbs

create app/controllers/helloworld.js

のファイルで定義されるデータはbindingされている。

indexは特殊

index.hbsはrouter.jsで定義されていなくても、

app/templates/application.hbs

の{{outlet}}で呼び出される。

router.jsで定義したルーティングはlink-toとかでアクセスできる

app/router.js

Router.map(function() {
  this.route('students');
});

以下のように書くことで、app/templates/students.hbs を呼び出すことができる。

{{#link-to 'students'}}
  Students
{{/link-to}}<br

ネストしてルーティングを行う

app/router.js

Router.map(function() {
  this.route('about', function(){
    this.route('location');
    this.route('job');
  });
});

hbs

{{#link-to 'about.job'}}job{{/link-to}}
{{#link-to 'about.location'}}location{{/link-to}}

ワイルドカードを使う

app/router.js

Router.map(function() {
  this.route('page-not-found', {path: '/*wild-card'});
});
$ ember g template page-not-found

のようにしてあげれば、定義されていないアドレスにアクセスした時にpage-not-foundページを表示させることができる。

student/1みたいに動的なルーティングを行う

:student_idがポイント。

app/router.js

Router.map(function() {
  this.route('students', {path: '/students/:student_id'});
});

以下のようにhbsファイルで、動的なリンクを生成できる。

{{#each model as |student|}}
  {{#link-to 'students' student}}
    {{student.name}}
  {{/link-to}}<br>
{{/each}}

{{#link-to 'students' student}}

studentを引数に渡す時、それは、studentのidプロパティをパラメーターとして渡すようになっている。

app/routesディレクトリの意味

まずはルーティング。

app/router.js

Router.map(function() {
  this.route('students');
  this.route('student', {path: '/students/:student_id'});
})

次に今回の主役であるapp/routesディレクトリを作成する。

$ ember g route students

app/routes/students.js

import Route from '@ember/routing/route';

export default Route.extend({
  model(){
    return [{id: 1, name: "aoge", age: 19, location: "hokkaido"},
            {id: 2, name: "boge", age: 20, location: "aomori"},
            {id: 3, name: "coge", age: 21, location: "ishikawa"},
            {id: 4, name: "doge", age: 22, location: "miyagi"}]
  }
});

最後にhbs。

app/templates/students.hbs

Student Route<br>
{{#each model as |student|}}
  {{#link-to 'student' student}}
    {{student.name}}
  {{/link-to}}<br>
{{/each}}

ここまでの流れでだいたい予想はついたと思うけれど、hbsが呼び出される前に、 app/routes/ディレクトリ下の同じ名前のファイルを探しに行きます。

そこでモデルやら何やら定義することができる。

そして、それをhbsへ渡すことができる。

モデルの読み込み前後でリダイレクトする

例えば、ログインフォームでパスワードが正しければこっち、間違ってればあっちみたいな処理ができる。

Redirecting

app/router.js

Router.map(function() {
  this.route('posts');
  this.route('post', { path: '/posts/:post_id' });
});

app/routes/posts.js

import Route from '@ember/routing/route';

export default Route.extend({
  model(){
    return [{id: 1, name: "hoge"}]
  },
  afterModel(model, transition) {
    if (model.get('length') === 1) {
      this.transitionTo('post', model.get('firstObject'));
    }
  }
});

http://localhost:4200/posts

にアクセスすると、

modelの読み込みの後に、

http://localhost:4200/posts/1

にリダイレクトされて、以下が表示される。

FROM post.hbs 
hoge