コンポーネントコラボレーターでのアクションの呼び出し

テンプレートからコンポーネントコラボレーターのアクションを直接呼び出すことができます。

構文

import Ember from 'ember';

export default Ember.Component.extend ({
   target_attribute: Ember.inject.service(),
  //code for component implementation
});

例

以下の例では、アプリケーションのテンプレートからコンポーネントコラボレーターのアクションを直接呼び出します。 _ember-actions_という名前のコンポーネントを作成し、次のコードで_app/components/_の下に作成されたコンポーネントテンプレートファイル_ember-actions.js_を開きます-

import Ember from 'ember';
var inject = Ember.inject;

export default Ember.Component.extend ({
   message: inject.service(),
   text: 'This is test file',
   actions: {
      pressMe: function () {
         var testText = this.get('start').thisistest();
         this.set('text', testText);
      }
   }
});

サービスを作成します。サービスは、アプリケーションのさまざまな部分で利用可能にすることができます。次のコマンドを使用して、サービスを作成します-

ember generate service emberactionmessage

_emberactionmessage.js_サービスファイルを開きます。このファイルは、次のコードで_app/services/_の下に作成されます-

import Ember from 'ember';

export default Ember.Service.extend ({
   isAuthenticated: true,
   thisistest: function () {
      return "Welcome to finddevguides";
   }
});

次に、起動時にアプリケーションを構成する初期化子を作成します。初期化子は、次のコマンドを使用して作成できます-

ember generate initializer init

次のコードで_app/initializers/_の下に作成された_init.js_初期化ファイルを開きます-

export function initialize(app) {
   app.inject('component', 'start', 'service:emberactionmessage');
}

export default {
   name: 'init',
   initialize: initialize
};

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

<button {{action "pressMe"}}>Click here to see the text</button><br>
<h4>{{text}}</h4>
{{yield}}

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

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

出力

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

Ember.jsコンポーネント呼び出しアクション

次にボタンをクリックすると、以下のスクリーンショットに示すようにサービスページからテキストが表示されます-

Ember.jsコンポーネント呼び出しアクション

Emberjs-comp-invk-act-on-collbtor

コンポーネントコラボレーターでのアクションの呼び出し

構文

例

出力

目次