调用组件协作器的操作

您可以直接从模板调用组件协作器的操作。

语法

import Ember from 'ember';

export default Ember.Component.extend ({
   target_attribute: Ember.inject.service(),
   // 组件实现的代码
});

示例

下面给出的示例指定直接从应用程序中的模板调用组件协作器上的操作。创建一个名为 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 Tutorialspoint";
   }
});

接下来创建一个初始化程序，它在应用程序启动时对其进行配置。可以使用以下命令创建初始化程序 −

ember generate initializer init

使用以下代码打开 init.js 初始化程序文件，该文件在 app/initializers/ 下创建 −

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

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

emberjs_component.html