YOSHINO日記

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

Ember.js入門9:モックサーバーを作成する:Fixtureデータを使う場合。

ember-cli-mirage

テストや開発のためのクライアントサーバーのモックを作成する。 https://github.com/samselikoff/ember-cli-mirage http://www.ember-cli-mirage.com/

ember install ember-cli-mirage

#=> create /mirage/config.js
#=> create /mirage/scenarios/default.js
#=> create /mirage/serializers/application.js

データを用意する

テストでも開発でも使えるデータを作成する。 http://www.ember-cli-mirage.com/docs/v0.4.x/fixtures/

$ mkdir mirage/fixtures
$ touch mirage/fixtures/students.js

データを用意します。 (emberの他の例にもれずファイル名は大事です。)

mirage/fixtures/students.js

export default [
  {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"}
]

APIのルーティング

mirage/config.js

export default function() {
    this.get('/students');
    this.get('/students/:id');
}

fixturesを読み込みます。

mirage/scenarios/default.js

export default function(server) {
  server.loadFixtures();
}

Adapterの作成

Class DS.JSONAPIAdapter

The JSONAPIAdapter is the default adapter used by Ember Data. It is responsible for transforming the store's requests into HTTP requests that follow the JSON API format.

storeされたデータをJSONフォーマットにして、HTTPリクエストと結びつけます。

$ ember g adapter application

以下のようなファイルが作成されます。

app/adapters/application.js

import DS from 'ember-data';

export default DS.JSONAPIAdapter.extend({
})

デフォルトのままでOKです。

※ちなみにRESTAdapterではうまくいきませんでした。

モデルの作成してstoreする

app/models/student.js

import DS from 'ember-data';

export default DS.Model.extend({
  name: DS.attr('string'),
  age: DS.attr('number')
})

モックサーバーから返ってくるデータをこのモデルにstoreされます。

stdents全体用に以下を。

app/routes/students.js

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

export default Route.extend({
  model(){
    return this.store.findAll('student');
  }
})

students/1用に以下を作成します。

app/routes/student.js

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

export default Route.extend({
  model(param){
    return this.store.findRecord('student', param.student_id);
  }
});

アプリケーション側のルーティング

app/router.js

以下を追記します。

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

ビュー:hbs

最後にビュー部分を作成します。

まず、students全体

http://localhost:4200/students

app/templates/students.hbs

FROM Student root

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

次に個別、student

http://localhost:4200/students/1

app/templates/student.hbs

{{model.name}}
{{model.age}}