YOSHINO日記

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

Ember.js入門7: viewに結びついたアクションの基礎

ボタンを押すたびにtrue、falseが切り替わる

togglePropertyは、propertyの値を反転させる。

app/components/action-component.js

import Component from '@ember/component';

export default Component.extend({
  showText: true,
  actions: {
    toggleText(){
      this.toggleProperty('showText');
    }
  }
});

app/templates/components/action-component.hbs

{{#if showText}}
showTextがtrueであれば、この文章が表示されます
{{/if}}<br>
<button {{action 'toggleText'}}>
  {{if showText 'Hide Text' 'Show Text'}}
</button>
{{yield}}

ちなみに、ダブルクリックでアクションを呼び出したい場合はこんな感じ。

<button {{action 'toggleText' on="doubleClick"}}>
  {{if showText 'Hide Text' 'Show Text'}}
</button>

actionにパラメーターを渡す

コンポーネントでのactionの定義

app/components/param-component.js

import Component from '@ember/component';

export default Component.extend({
  actions: {
    pressed(text){
      alert(text);
    }
  }
});

hbs

{{input text='text' value=hello}}
<button {{action 'pressed' hello}}>
  Press Me
</button>
{{yield}}

インプットするたびにアクションが呼び出される。

app/controllers/application.js

import Controller from '@ember/controller';

export default Controller.extend({
  helloText: 'Hello World',
  actions: {
    pressed(text){
      alert(text);
    }
  }
});

key-press='pressed'がポイント。

app/templates/application.hbs

<h2 id="title">Welcome to Ember</h2>
<br>
<br>
{{input value=helloText key-press='pressed'}}
{{outlet}}
<br>