Emberjs-temp-actions

EmberJS-アクション

_ \ {\ {action}} _ヘルパークラスは、HTML要素をクリック可能にするために使用され、ユーザーがイベントをクリックすると、アクションがアプリケーションに転送されます。

構文

<button {{action 'action-name'}}>Click</button>

上記のコードはボタン_Click_をアプリケーションに追加し、ユーザーがボタンをクリックすると、指定されたアクションメソッドにアクションが転送されます。

次の表は、アクションのアクションイベントとその説明を示しています-

S.No.	Action Events & Description
1	Action Parameters 引数は、_ \ {\ {action}} _ヘルパーの助けを借りてアクションハンドラーに渡すことができます。
2	Specifying the Type of Event onオプションを使用して、代替イベントを_ \ {\ {action}} _ヘルパーで指定できます。
3	Allowing Modifier Keys allowedKeys_オプションを使用すると、修飾キーと \ {\ {action}} _ヘルパーを許可できます。
4	Modifying Action’s first Parameter _ \ {\ {action}} _ヘルパーの値オプションを指定することにより、アクションの最初のパラメーターを変更できます。

例

以下の例では、_ \ {\ {action}} _ヘルパーを使用してHTML要素をクリック可能にし、指定されたアクションメソッドにアクションを転送します。 次のコマンドを使用して、ポストアクションという名前のコンポーネントを作成します-

ember g component post-action

_app/component/_の下に作成された_post-action.js_ファイルを開き、次のコードを追加します-

import Ember from 'ember';

export default Ember.Component.extend ({
   actions: {
      toggleBody() {
         this.toggleProperty('isShowingBody');
      }
   }
});

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

<h1>Hello</h1><h3><button {{action "toggleBody"}}>{{title}}Toggle</button></h3>
{{#if isShowingBody}}
   <h2>Welcome To Tutorials Point</h2>
{{/if}}
{{yield}}

_index.hbs_ファイルで、_app/templates/_の下に作成される以下のコードをコピーします-

{{post-action}}
{{outlet}}

出力

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

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

_Toggle_ボタンをクリックすると、テンプレートファイルから次のテキストが表示されます-

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