Emberjs-comp-impl-act-design-child-comp

アクションの実装と子コンポーネントの設計

指定されたアクションメソッドを呼び出して親コンポーネントにアクションを実装し、指定されたアクションメソッドの子コンポーネントにロジックを作成できます。

構文

アクションは以下のように実装できます-

import Ember from 'ember';

export default Ember.Component.extend ({
   actions: {
      action_name() {
        //code here
      }
   }
});

子コンポーネントは、次のコード行のように実装できます-

<tag_name {{action "action_name"}}>{{Text Here}}</end_of_tag>

例

以下の例は、アプリケーションでアクションを実装し、子コンポーネントを設計することを指定しています。 名前ember-actionsでコンポーネントを作成し、次のコードでapp/components/の下に作成されたコンポーネントテンプレートファイルember-actions.jsを開きます-

import Ember from 'ember';

export default Ember.Component.extend ({
   actions: {
      toggleBody() {
         this.decrementProperty('isShowingBody');
      },
      cancelBody() {
         this.incrementProperty('isShowingBody');
      }
   }
});

_app/templates/components/_の下に作成された_ember-actions.hbs_ファイルを開き、次のコードを入力します-

<button {{action "toggleBody"}}>{{title}}Show (Display Text)</button>
{{#if isShowingBody }}
   <h2>Welcome to finddevguides...</h2>
{{/if}}
<button class="confirm-cancel" {{action "cancelBody"}}>{{title}}Hide (Hides Text)
</button>
{{yield}}

_application.hbs_ファイルを作成し、次のコードを追加します-

{{ember-actions}}
{{outlet}}

出力

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

アクションを実装するEmber.jsコンポーネント

「表示」ボタンをクリックすると、テキストが表示され、「非表示」ボタンをクリックするとテキストが非表示になります-

アクションを実装するEmber.jsコンポーネント