YOSHINO日記

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

Ember.js入門11: クエリパラメーターを使って動的にviewを変更する

クエリパラメーターを実際に使ってみる

app/controllers/application.js

import Controller from '@ember/controller';

export default Controller.extend({
  queryParams: ['student'],
  student: "http://localhost:4200/?student=****  クエリパラメーターを入力してください"
});

app/templates/application.hbs

<h2>Welcome to Ember!!</h2>

{{outlet}}

studnet: {{student}}

http://localhost:4200/

にアクセスします。

すると以下のように表示されます(defaut値が表示されているのがわかります)。

Welcome to Ember!!
indexはデフォルトで呼ばれます

studnet: http://localhost:4200/?student=**** クエリパラメーターを入力してください

続いてクエリパラメーターを渡してみます。

http://localhost:4200/?student=Hoge

すると画面には以下のように表示されます。

Welcome to Ember!!
indexはデフォルトで呼ばれます

studnet: Hoge

link-toメソッドにパラメータとして渡す。

app/templates/application.hbs

を以下のように変更します。

studnet: {{student}}
{{#link-to 'application' (query-params student="Jane")}}
  Jane queryParams
{{/link-to}}

リンクボタンを押すと、クエリパラメーターに"Jane"が渡され、画面には、studnet: Janeが表示されます。