Emberjs-temp-act-tp-evnt

イベントのタイプを指定するテンプレートアクション

onオプションを使用して、代替イベントを_ \ {\ {action}} _ヘルパーで指定できます。

構文

<button {{action "action-name" on = "event-name"}}>Click</button>

例

以下の例では、_ \ {\ {action}} _ヘルパーの代替イベントを指定しています。 新しいルートを作成し、次のコードで_post-action.js_という名前を付けます-

import Ember from 'ember';

export default Ember.Component.extend ({
   actions: {
     //toggling the text
      toggleBody: function () {
         this.toggleProperty('isShowing');
      }
   }
});

次のコードで_app/templates/_の下に作成された_post-action.hbs_ファイルを開きます-

<button {{action "toggleBody" on = 'click'}}>{{title}}</button>
{{#if isShowing}}
<h2>Welcome to finddevguides</h2>
{{/if}}
{{outlet}}

次に、次のコードで_app/templates/_の下に作成された_application.hbs_ファイルを開きます-

{{post-action title = "Click Me"}}
{{outlet}}

出力

emberサーバーを実行します。次の出力が表示されます-

Ember.jsテンプレートアクションタイプイベント

次に、ボタンをクリックして、_ \ {\ {action}} _ヘルパーが指定された要素でアクションをトリガーし、次の結果を表示します-

Ember.jsテンプレートアクションタイプイベント