YOSHINO日記

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

Ember.js入門12: コントローラーの基礎

基本的なこと

ember.jsには、controllerとrouteが存在します。

覚えて置かなければいけないことの1つは、読み込まれる順番です。

1: controller

2: route

です。

コントローラーの基本

最初に基本的な使い方をみてみます。

controllerでactionを定義します。

app/controllers/application.js

import Controller from '@ember/controller';

export default Controller.extend({
  actions: {
    action1(){
      alert('Applciation controller action action1');
    },
  }
});

viewでアクションを呼びします。

app/templates/application.hbs

<button {{action 'action1'}}>Action 1 in controller</button>

actionをコントローラーでもルートでも定義したい場合

actionsの中で定義されたメソッドのデフォルトの返り値はfalseです。

そしてfalseの場合、そのメソッドはrouteでの定義を確認しに来ません。

例を挙げてみます。

まず、controllerでactionを定義します。

app/controllers/application.js

export default Controller.extend({
  actions: {
    action2(){
      alert('Applciation controller action action2');
      return true;
    },
  }
});

次にrouteでも同じアクションを定義しています。

enterに関してはrouteだけで定義されているactionです。

app/routes/application.js

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

export default Route.extend({
  actions: {
    enter(){
      alert('Applciation route action enter!');
    },
    action2(){
      alert('Applciation route action action2!');
    },
  }
});

最後にviewです。

<button {{action 'action2'}}>Action 2 in controller and route</button>
<button {{action 'enter'}}>Action enter only in route</button>

action2のボタンを押すと、controllerとrouteからalertが二回呼び出されます。

たとえば、controllerのaction2の定義からreturn true;の記述を削除すると、 デフォルト値である、falseがrouteに渡されます。

結果、action2のボタンを押すと、controllerのactionが一度だけ呼び出されます。

引数を渡す

controllerでactionを定義します。

app/controllers/application.js

export default Controller.extend({
  actions: {
    action3(val){
      alert(`Value Passed: ${val} in action3`);
    },
  }
});

viewから、controllerのactionに値を渡しています。

<button {{action 'action3' 'Hello World!'}}>Action 3 Passing Values</button>