YOSHINO日記

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

Ember.js入門16: コンポーネント に外部から変数をわたす

コンポーネントは外部の世界から孤立している

componentは、javasciptとhbsの2つのファイルから構成されている。

$ ember g component student-list

# create app/components/student-list.js
# create app/templates/components/student-list

つまり、コンポーネントの世界から外部の変数にアクセスすることはできない。

外部の変数を明示的にコンポーネントに渡さない限りは。

ここでは、外部からcompModelという変数を渡されることを想定して以下の様に用意します。

app/components/student-list.js

{{#each compModel as |student|}}
  {{student}}<br>
{{/each}}

コンポーネントにhbs経由で外部の変数をわたす

モデルを定義します。

app/routes/application.js

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

export default Route.extend({
  model(){
    return ['jim', 'jeff', 'jill']
  }
 })

hbsで定義したモデルをコンポーネントにセットします。

app/templates/application.hbs

{{student-list compModel=model}}

{{outlet}}

これで画面には、以下のように、application.jsで定義されたモデルが、コンポーネントのhbsを通して、 以下のように表示されます。

jim
jeff
jill