EmberJS-コンポーネントの定義

Ember.jsでコンポーネントを簡単に定義でき、各コンポーネントの名前にはダッシュが必要です（例：my-component）。 Ember.jsには、_Ember.Component_クラスを使用してコンポーネントサブクラスを定義する機能があります。

コンポーネントは、以下のコマンドを使用して作成できます-

ember generate component component-name

例

以下に示す例では、Ember.jsでコンポーネントを定義する方法を説明します。 _post-action_という名前のコンポーネントを作成します。これは、_app/components/_の下で定義されます。

_post-action.js_ファイルを開き、次のコードを追加します-

import Ember from 'ember';

export default Ember.Component.extend ({
   toggleBody:['Welcome to finddevguides!!!']
});

今、次のコードでコンポーネントテンプレートファイル_post-action.hbs_を開きます-

{{#each toggleBody as |body|}}
   Hello...{{body}}
{{/each}}
{{yield}}

_index.hbs_ファイルを開き、次のコードを追加します-

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

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