Emberjs-comp-invk-act-on-collbtor
提供:Dev Guides
コンポーネントコラボレーターでのアクションの呼び出し
テンプレートからコンポーネントコラボレーターのアクションを直接呼び出すことができます。
構文
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サーバーを実行します。次の出力が表示されます-
次にボタンをクリックすると、以下のスクリーンショットに示すようにサービスページからテキストが表示されます-