调用组件协作者上的操作

你可以直接从模板调用组件协作者上的操作。

语法

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

现在打开在 app/services/ 下创建的 emberactionmessage.js 服务文件，代码如下 −

import Ember from 'ember';

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

下一步创建初始化程序，它在应用程序引导时对应用程序进行配置。可以使用以下命令创建初始化程序 −

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 服务器；你将收到以下输出 −

接下来单击按钮，它将显示如下截图所示服务页面的文本 −