YOSHINO日記

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

Ember.js入門15: Closure action と コンポーネント : 別日コントローラーで定義されているアクションをコンポーネントから呼び出す。

コンポーネントに渡すためにアクションを定義する(closure action)。

モデルとアクションを定義します。

最終的には、このモデルとアクションをコンポーネントを経由してあつかいます。

app/routes/application.js

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

export default Route.extend({
  listOfStudents: [],
  beforeModel(){
    this.reset();
  },
  model(){
    return this.get('listOfStudents');
  },
  reset(){
    let st = this.get('listOfStudents');
    st.clear();
    st.pushObject('Tiffany');
    st.pushObject('Zack');
    st.pushObject('George');
  },
  actions: {
    removeRoute(){
      this.get('listOfStudents').popObject();
    },
    resetRoute(){
      this.reset();
    }
  }
});

コンポーネントにアクションを渡したいので、sendメソッドを利用します。

viewで以下のように、アクションを渡して挙げます。

app/templates/application.hbs

<h2 id="title">Welcome to Ember!</h2>

{{student-list onRemove=(action 'removeController') onReset=(action 'resetController')}}

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

{{outlet}}

渡されたアクションをコンポネント側で受けとり、それをviewへ反映させる。

渡された2つのアクションであるonRemove、onResetをコンポーネントファイルの中で定義します。

app/components/student-list.js

import Component from '@ember/component';

export default Component.extend({
  actions: {
    removeComponent(){
      this.get('onRemove')();
    },
    resetComponent(){
      this.attrs.onReset();
    }
  }
})

定義したアクションをviewへ反映させます。

app/templates/components/student-list.hbs

<button {{action 'removeComponent'}}>Remove</button>
<button {{action 'resetComponent'}}>Reset</button><br>