YOSHINO日記

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

Ember.js入門14: Componentで再利用性を高める

基本的なこと

componentファイルには"-"がつかなくてはいけない。

app/components/student-info.js

import Component from '@ember/component';

export default Component.extend({
  click(){
    $('html').fadeToggle('slow', 'linear');
    $('html').delay(250).fadeIn();
  }
});

componentを呼び出す。

app/templates/application.hbs

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

{{#student-info}}
  Student info block
{{/student-info}

html上には以下の文面が表示され、クリックすると、fadeTpggleしたり、fadeInしたりする。

Welcome to Ember!
student info:



Student info block 

component内での実行順序

guides.emberjs.com

一番最初にRenderされる場合。

1: init

2: didReceiveAttrs

3: willRender

4: didInsertElement

5: didRender

Componentにおけるデータバインディング

listOfStudentsを定義して、そこにデータをいれます。

このデータは、view側と双方のバインディングされています。

app/components/student-info.js

import Component from '@ember/component';

export default Component.extend({
  init() {
    this._super(...arguments);
    this.setup();
  },
  actions: {
    remove(){
      this.get('listOfStudents').popObject();
    },
    reset(){
      this.setup();
    }
  },
  setup(){
    let st = this.set('listOfStudents',[]);
    st.clear();
    st.pushObject('Erick');
    st.pushObject('Bob');
    st.pushObject('Suze');
  }
})

app/templates/components/student-info.hbs

<button {{action 'remove'}}>Remove</button>
<button {{action 'reset'}}>Reset</button><br>

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

app/templates/application.hbs

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

{{student-info}}

{{outlet}}

f:id:taiki44no:20180705072132p:plain

removeボタンを押せば、配列が1つ取り除かれ、それは瞬時に反映されます。

resetボタンを押すと、配列の状態が初期化されます。